zq
3 months ago
23 changed files with 562 additions and 5 deletions
|
After Width: | Height: | Size: 771 B |
|
After Width: | Height: | Size: 390 B |
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<el-button |
|||
:type="type" |
|||
:plain="plain" |
|||
:loading="loading" |
|||
:size="size" |
|||
:disabled="disabled" |
|||
:style="{...btnstyle}" |
|||
> |
|||
<slot></slot> |
|||
</el-button> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipButton', |
|||
// props:['type','plain'], |
|||
props:{ |
|||
type:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
size:{ |
|||
type:String, |
|||
default:'normal' |
|||
}, |
|||
// 为false 的可以不需要传参 |
|||
plain:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
loading:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
disabled:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
btnstyle:Object |
|||
}, |
|||
data() { |
|||
return { |
|||
radio: '' |
|||
} |
|||
}, |
|||
mounted(){ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
@ -0,0 +1,25 @@ |
|||
<template> |
|||
<el-input |
|||
type="text" |
|||
:style="{...styleObject}" |
|||
:rows="2" |
|||
placeholder="请输入内容" |
|||
:disabled="disabled" |
|||
v-model="textarea"> |
|||
</el-input> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipInput', |
|||
props:['styleObject','disabled'], |
|||
data() { |
|||
return { |
|||
textarea: '' |
|||
} |
|||
}, |
|||
mounted(){ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<el-radio |
|||
:label="label" |
|||
:disabled="disabled" |
|||
:v-model="defaultValue" |
|||
> |
|||
<template #label> |
|||
<span><img src="../assets/radio_checked.svg" alt="custom icon" style="width: 16px; height: 16px;"> {{ text }}</span> |
|||
</template> |
|||
</el-radio> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipRadio', |
|||
props:['radio','label','defaultValue','disabled','text'], |
|||
data() { |
|||
return { |
|||
// radio: '1' |
|||
} |
|||
}, |
|||
mounted(){ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,23 @@ |
|||
<template> |
|||
<el-select v-model="value" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipTextarea', |
|||
props:['options'], |
|||
data() { |
|||
return { |
|||
|
|||
value: '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<el-table |
|||
:data="tableData" |
|||
height="250" |
|||
:border=true |
|||
style="width: 100%"> |
|||
<slot></slot> |
|||
</el-table> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipTextarea', |
|||
props:['tableData'], |
|||
data() { |
|||
return { |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,24 @@ |
|||
<template> |
|||
<el-input |
|||
type="textarea" |
|||
:style="{width:styleObject.width,height:styleObject.height}" |
|||
:rows="2" |
|||
placeholder="请输入内容" |
|||
v-model="textarea"> |
|||
</el-input> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipTextarea', |
|||
props:['styleObject'], |
|||
data() { |
|||
return { |
|||
textarea: '' |
|||
} |
|||
}, |
|||
mounted(){ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1 @@ |
|||
{"global":{"$--color-primary":"#006AFF","$--color-success":"#0DAF49","$--color-warning":"#F08614","$--color-danger":"#FF4D4F","$--color-text-primary":"#1E2226","$--color-text-placeholder":"#BABDC2","$--color-text-secondary":"#1E2226","$--border-color-base":"#DFE2E6"},"local":{}} |
|||
@ -0,0 +1,67 @@ |
|||
|
|||
body{ |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 14px; |
|||
} |
|||
/* button==== start */ |
|||
|
|||
.el-button{ |
|||
width: 144px; |
|||
height: 46px; |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 14px; |
|||
letter-spacing: 0.08em; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.el-button--normal{ |
|||
color: #626573; |
|||
} |
|||
.el-button--mild{ |
|||
background: #FFFFFF; |
|||
border: 1px solid #006AFF; |
|||
color: #006AFF; |
|||
} |
|||
.el-button--primary,.el-button--success,.el-button--info,.el-button--warning,.el-button--danger{ |
|||
color: #fff !important; |
|||
} |
|||
.el-button--medium{//中等按钮 |
|||
width: 97px; |
|||
height: 33px; |
|||
font-size: 14px; |
|||
line-height: 14px; |
|||
span{ |
|||
height: 14px; |
|||
} |
|||
|
|||
} |
|||
.el-button--small{//小的按钮 |
|||
width: 80px; |
|||
height: 32px; |
|||
font-size: 12px; |
|||
} |
|||
.el-button--mini{ //迷你按钮 |
|||
width: 80px; |
|||
height: 28px; |
|||
font-size: 12px; |
|||
} |
|||
/* button==== end */ |
|||
|
|||
// radio ---start |
|||
.el-radio__input.is-checked .el-radio__inner::after { |
|||
content: ''; /* 清空默认的伪元素内容 */ |
|||
width: 14px; |
|||
height: 14px; |
|||
background-image: url('../../assets/radio_checked.svg'); /* 使用你的自定义图标 */ |
|||
background-size: contain; |
|||
background-repeat: no-repeat; |
|||
} |
|||
.el-radio__label{ |
|||
font-weight: normal; |
|||
} |
|||
// radio ---end |
|||
// input ---start |
|||
|
|||
|
|||
// input ---end |
|||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,218 @@ |
|||
<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> |
|||
|
|||
@ -1,4 +1,12 @@ |
|||
const { defineConfig } = require('@vue/cli-service') |
|||
module.exports = defineConfig({ |
|||
transpileDependencies: true |
|||
transpileDependencies: true, |
|||
devServer: { |
|||
port: 8080 |
|||
}, |
|||
chainWebpack: config => { |
|||
config.resolve.alias |
|||
.set('@components', '@/src/components') |
|||
.set('@assets', '@/src/assets'); |
|||
} |
|||
}) |
|||
|
|||
Loading…
Reference in new issue