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') |
const { defineConfig } = require('@vue/cli-service') |
||||
module.exports = defineConfig({ |
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