You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
218 lines
7.6 KiB
218 lines
7.6 KiB
3 months ago
|
<template>
|
||
|
|
<div class="elementWrap">
|
||
|
|
<div class="ele-item">
|
||
|
|
<label for="">下拉框：</label>
|
||
|
|
<GuipSelect msg="Welcome to Your Vue.js App" :options="options"/>
|
||
|
|
</div>
|
||
|
|
<div class="ele-item">
|
||
|
|
<label for="">表格：</label>
|
||
|
|
<GuipTable msg="Welcome to Your Vue.js App" :tableData="tableData">
|
||
|
|
<el-table-column
|
||
|
|
prop="date"
|
||
|
|
label="日期"
|
||
|
|
width="180">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="name"
|
||
|
|
label="姓名"
|
||
|
|
width="180">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="address"
|
||
|
|
label="地址">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="address1"
|
||
|
|
label="地址测试">
|
||
|
|
</el-table-column>
|
||
|
|
</GuipTable>
|
||
|
|
</div>
|
||
|
|
<div class="ele-item">
|
||
|
|
<label for="">文本域：</label>
|
||
|
|
<GuipTextarea :styleObject="styleObject"/>
|
||
|
|
</div>
|
||
|
|
<div class="ele-item">
|
||
|
|
<label for="">单选框：</label>
|
||
|
|
<el-radio v-model="radio1" :label="1">选项一</el-radio>
|
||
|
|
<el-radio v-model="radio1" :label="2">选项二</el-radio>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ele-item">
|
||
|
|
<label for="">单选框组：</label>
|
||
|
|
<el-radio-group v-model="radio" @input="radioChange">
|
||
|
|
<el-radio :label="3">备选项</el-radio>
|
||
|
|
<el-radio :label="6">备选项</el-radio>
|
||
|
|
<el-radio :label="9">备选项</el-radio>
|
||
|
|
</el-radio-group>
|
||
|
|
</div>
|
||
|
|
<div class="ele-item">
|
||
|
|
<label for="">常规按钮：</label>
|
||
|
|
<GuipButton >默认按钮</GuipButton>
|
||
|
|
<GuipButton type="mild" size="medium">轻度按钮</GuipButton>
|
||
|
|
<GuipButton type="primary">按钮</GuipButton>
|
||
|
|
<GuipButton type="success" :loading="false" :plain="plain">按钮</GuipButton>
|
||
|
|
<GuipButton type="info" :loading="false" :plain="plain">按钮</GuipButton>
|
||
|
|
<GuipButton type="warning" :loading="false" :plain="plain">按钮</GuipButton>
|
||
|
|
<GuipButton type="danger" :loading="false" :plain="plain">按钮</GuipButton>
|
||
|
|
</div>
|
||
|
|
<div class="ele-item">
|
||
|
|
<label for="">禁用按钮：</label>
|
||
|
|
<GuipButton :disabled="true">默认按钮</GuipButton>
|
||
|
|
<GuipButton type="primary" size="medium" :disabled="true">按钮</GuipButton>
|
||
|
|
<GuipButton type="success" :disabled="true">按钮</GuipButton>
|
||
|
|
<GuipButton type="info" :disabled="true">按钮</GuipButton>
|
||
|
|
<GuipButton type="warning" :disabled="true">按钮</GuipButton>
|
||
|
|
<GuipButton type="danger" :disabled="true">按钮</GuipButton>
|
||
|
|
</div>
|
||
|
|
<div class="ele-item">
|
||
|
|
<label for="">三种尺寸按钮：</label>
|
||
|
|
<GuipButton type="primary" >默认按钮</GuipButton>
|
||
|
|
<GuipButton type="primary" size="medium">中等按钮</GuipButton>
|
||
|
|
<GuipButton type="primary" size="small">小的按钮</GuipButton>
|
||
|
|
<GuipButton type="primary" size="mini">迷你按钮</GuipButton>
|
||
|
|
</div>
|
||
|
|
<div class="ele-item">
|
||
|
|
<label for="">自定义宽高按钮：</label>
|
||
|
|
<GuipButton type="primary" :btnstyle="btnstyleObj">超长啊扭测试长的长的</GuipButton>
|
||
|
|
<GuipButton type="primary" :btnstyle="btnstyleObj1">随便写的</GuipButton>
|
||
|
|
</div>
|
||
|
|
<div class="ele-item">
|
||
|
|
<label for="">输入框：</label>
|
||
|
|
<GuipInput :styleObject="styleObject1"/>
|
||
|
|
<!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
|
||
|
|
</div>
|
||
|
|
<!-- <GuipRadio />
|
||
|
|
<GuipButton />
|
||
|
|
<GuipConfirm />
|
||
|
|
<GuipConfirm />
|
||
|
|
<GiupInput />
|
||
|
|
<GuipModal /> -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// @ is an alias to /src
|
||
|
|
// import GuipRadio from '@/components/GuipRadio.vue';
|
||
|
|
import GuipButton from '@/components/GuipButton.vue';
|
||
|
|
// import GuipConfirm from '@/components/GuipConfirm.vue';
|
||
|
|
import GuipInput from '@/components/GuipInput.vue';
|
||
|
|
// import GuipModal from '@/components/GuipModal.vue';
|
||
|
|
import GuipSelect from '@/components/GuipSelect.vue';
|
||
|
|
import GuipTable from '@/components/GuipTable.vue';
|
||
|
|
import GuipTextarea from '@/components/GuipTextarea.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'HomeView',
|
||
|
|
components: {
|
||
|
|
GuipTextarea,
|
||
|
|
GuipTable,
|
||
|
|
// GuipRadio,
|
||
|
|
GuipButton,
|
||
|
|
// GuipConfirm,
|
||
|
|
GuipInput,
|
||
|
|
// GuipModal,
|
||
|
|
GuipSelect
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
input:'hahhahah',
|
||
|
|
radio:3,
|
||
|
|
radio1:5,
|
||
|
|
btnstyleObj:{
|
||
|
|
width: '247px',
|
||
|
|
height: '44px',
|
||
|
|
background: '#F2F7FF',
|
||
|
|
borderRadius: '2px',
|
||
|
|
fontSize:'14px',
|
||
|
|
letterSpacing: '0.08em',
|
||
|
|
color: '#006AFF !important'
|
||
|
|
},
|
||
|
|
btnstyleObj1:{
|
||
|
|
width: '180px',
|
||
|
|
height: '40px',
|
||
|
|
},
|
||
|
|
styleObject:{
|
||
|
|
width:'200px',
|
||
|
|
height:'40px'
|
||
|
|
},
|
||
|
|
styleObject1:{
|
||
|
|
width:'200px',
|
||
|
|
height:'38px'
|
||
|
|
},
|
||
|
|
plain:false,
|
||
|
|
tableData: [{
|
||
|
|
date: '2016-05-03',
|
||
|
|
name: '王小虎',
|
||
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
||
|
|
}, {
|
||
|
|
date: '2016-05-02',
|
||
|
|
name: '王小虎',
|
||
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
||
|
|
}, {
|
||
|
|
date: '2016-05-04',
|
||
|
|
name: '王小虎',
|
||
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
||
|
|
}, {
|
||
|
|
date: '2016-05-01',
|
||
|
|
name: '王小虎',
|
||
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
||
|
|
}, {
|
||
|
|
date: '2016-05-08',
|
||
|
|
name: '王小虎',
|
||
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
||
|
|
}, {
|
||
|
|
date: '2016-05-06',
|
||
|
|
name: '王小虎',
|
||
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
||
|
|
}, {
|
||
|
|
date: '2016-05-07',
|
||
|
|
name: '王小虎',
|
||
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
||
|
|
}],
|
||
|
|
options: [{
|
||
|
|
value: '选项1',
|
||
|
|
label: '黄金糕'
|
||
|
|
}, {
|
||
|
|
value: '选项2',
|
||
|
|
label: '双皮奶'
|
||
|
|
}, {
|
||
|
|
value: '选项3',
|
||
|
|
label: '蚵仔煎'
|
||
|
|
}, {
|
||
|
|
value: '选项4',
|
||
|
|
label: '龙须面'
|
||
|
|
}, {
|
||
|
|
value: '选项5',
|
||
|
|
label: '北京烤鸭'
|
||
|
|
}],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
// 监听单选框组变化
|
||
|
|
radioChange() {
|
||
|
|
console.log(this.radio,'=====');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.elementWrap{
|
||
|
|
/* width: 100%; */
|
||
|
|
padding: 30px 40px;
|
||
|
|
.ele-item{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-start;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
label{
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
width: 100px;
|
||
|
|
margin-right: 10px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|