Watch 1 Star 1 Fork 0

刘勇 / liuyongotherApache-2.0

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
Clone or download
center.vue 6.79 KB
Copy Edit Web IDE Raw Blame History
liuyong-byte authored 2020-04-18 16:48 . vue
<template>
<div>
<el-select slot="prepend" multiple v-model="sum" placeholder="" @change="sel">
<el-option
v-for="item in options"
:key="item.index"
:value="item.name">
<span style="float: left">{{ item.name }}{{item.index}}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.pass }}</span>
</el-option>
</el-select>
<el-input size="medium" v-model="input" placeholder="qisa">
<el-button slot="append" icon="el-icon-search"></el-button>
<template slot="prepend">as</template>
<template slot="append">12</template>
</el-input>
<el-input type="textarea" v-model="input" autosize placeholder=""></el-input>
<el-input
placeholder="请选择日期"
v-model="input">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="请输入内容"
v-model="input">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-input v-model="input" placeholder="请输入" prefix-icon="el-icon-delete"></el-input>{{input}}
<el-input-number v-model="input" @change="inputChange" :min="1" :max="10" label="label"></el-input-number>
<el-checkbox-group v-model="checkList" @change="list" fill="red" text-color="red" size="small">
<el-checkbox label="复选框 A" size="mini"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
<el-radio-group v-model="radio">
<el-radio :label="3" border >备选项</el-radio>
<el-radio :label="6" disabled="">备选项</el-radio>
<el-radio :label="9" border >备选项</el-radio>
</el-radio-group>
<el-radio-group v-model="radio2" size="medium">
<el-radio-button label="上海" ></el-radio-button>
<el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
<div>
<el-link icon="el-icon-edit">编辑</el-link>
<el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
</div>
<el-row :gutter="10">
<div>
<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
<el-link type="primary" :href="url">主要链接</el-link>
<el-link type="success">成功链接</el-link>
<el-link type="warning">警告链接</el-link>
<el-link type="danger">危险链接</el-link>
<el-link type="info">信息链接</el-link>
</div>
</el-row>
<el-row>
<el-button>默认按钮</el-button>
<el-button size="medium">中等按钮</el-button>
<el-button size="small">小型按钮</el-button>
<el-button size="mini" disabled>超小按钮</el-button>
</el-row>
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
<el-button type="text" :loading="true">文字按钮</el-button>
<el-button type="text" disabled>文字按钮</el-button>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
<el-row>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary" icon="el-icon-check" circle >主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<!-- <el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。
<el-header>:顶栏容器。
<el-aside>:侧边栏容器。
<el-main>:主要区域容器。
<el-footer>:底栏容器。 -->
<span>12</span>
<el-container>
<el-header >Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
<el-footer>qw</el-footer>
</el-container>
<el-col :span="6" :xs="24">1</el-col>
<el-col :span="6" :xs="24">2</el-col>
<el-col :span="6" :xs="24">3</el-col>
<el-col :span="6" :xs="24">4</el-col>
</el-row>
<el-row :gutter="10" >
<el-col :span="6" :push="6" style="border:1px solid red;">1</el-col>
</el-row>
</div>
</template>
<script>
export default {
data(){
return {
checkList: [],
sum:[],
url:"https://element.eleme.io",
radio1: '上海',
radio2: '上海',
radio3: '上海',
radio4: '上海',
radio: 3,
input:'',
options:[
{index:1,name:"liu",pass:"sa"},
{index:2,name:"yong",pass:"sq"}
]
}
},
methods: {
list:function(){
console.log(1)
console.log(this.checkList)
},
inputChange:function(){
console.log(this.input)
},
sel:function(){
console.log(this.sum)
}
},
}
</script>
<style scoped>
.el-header, .el-footer {
background-color: #B3C0D1;
color: "red";
text-align: center;
line-height: 60px;
border-radius:40px ;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

Comment ( 0 )

Sign in for post a comment

other
1
https://gitee.com/liuyong-byte/liuyong.git
git@gitee.com:liuyong-byte/liuyong.git
liuyong-byte
liuyong
liuyong
master

Search