zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

封装开关组件、表格、输入框、单选框增加属性

zq-develop
zq 3 months ago
parent
7af4786f6b
commit
49ed7dbdd1
7 changed files with 691 additions and 450 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      src/components/GuipDialog.vue
  2. 13
      src/components/GuipInput.vue
  3. 4
      src/components/GuipRadio.vue
  4. 101
      src/components/GuipSwitch.vue
  5. 126
      src/components/GuipTable.vue
  6. 46
      src/style/theme/common.scss
  7. 816
      src/views/elementGroups.vue

35
src/components/GuipDialog.vue
View File

@ -6,18 +6,19 @@
:show-close="showCloseButton"
:before-close="handleClose"
>
<!-- 自定义内容 -->
<slot></slot>
<!-- 底部按钮 -->
<span slot="footer" class="dialog-footer flex">
<el-button v-if="showCancelButton" @click="handleCancel">{{ cancelText }}</el-button>
<el-button type="primary" @click="handleConfirm">{{ confirmText }}</el-button>
</span>
<!-- 自定义内容 -->
<slot></slot>
<!-- 底部按钮 -->
<span slot="footer" class="dialog-footer flex" style="justify-content: space-between;">
<GuipButton v-if="showCancelButton" @click="handleCancel" type="mild" >{{ cancelText }}</GuipButton>
<GuipButton type="primary" @click="handleConfirm">{{ confirmText }}</GuipButton>
</span>
</el-dialog>
</template>
<script>
import GuipButton from '@/components/GuipButton.vue';
export default {
name: 'CustomDialog',
props: {
@ -34,7 +35,7 @@
// 弹框宽度
width: {
type: String,
default: '30%',
default: '599px',
},
// 是否显示右上角关闭按钮
showCloseButton: {
@ -57,6 +58,9 @@
default: '确定',
},
},
components:{
GuipButton
},
computed: {
dialogShow: {
get() {
@ -107,8 +111,15 @@
};
</script>
<style scoped>
.dialog-footer {
text-align: right;
<style scoped lang="scss">
.el-dialog{
/* width: 599px; */
// min-height: 344px;
// .el-dialog__header{
// padding: 32px 32px 12px;
// }
// .el-dialog__body{
// padding: 0 32px 32px;
// }
}
</style>

13
src/components/GuipInput.vue
View File

@ -1,6 +1,6 @@
<template>
<el-form-item
:style="{...style,height:height,...styleObject}"
:style="{height:height,...styleObject}"
:class="[{'column':column},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item']"
:label="label" :prop="prop" :rules="rules">
<p v-if="desc" class="desc_right">{{ desc }}</p>
@ -37,6 +37,8 @@
<!-- <i slot="suffix" v-if="empty" class="el-icon-close" @click="handleClear">h</i> -->
<!-- <el-button slot="append" v-if="hasBtn" type="primary" @click="$emit('enter',value)">搜索</el-button> -->
</el-input>
<!-- 单位 -->
<span class="unit" v-if="unit">{{ unit }}</span>
</el-form-item>
</template>
@ -46,7 +48,7 @@
name: 'GuipInput',
props:['styleObject','disabled','defaultValue','placeholder',
'maxlength','minLength','clear','width','height','showWordLimit',
'label','type','prop','rules','column','addClass','desc'],
'label','type','prop','rules','column','addClass','desc','unit'],
data() {
return {
value: '',
@ -131,4 +133,11 @@
}
</script>
<style lang="scss" scoped>
.unit {
position: absolute;
right: 12px; /* 根据需要调整位置 */
top: 50%;
transform: translateY(-50%);
pointer-events: none; /* 防止单位文本影响输入框的点击事件 */
}
</style>

4
src/components/GuipRadio.vue
View File

@ -12,7 +12,9 @@
:label="option.value"
:disabled="option.disabled"
>
{{ option.label }}
<!-- 默认展示和选中显示 不同文案 -->
{{ selectedValue === option.value ? option.selectedLabel : option.label }}
<!-- 自定义 选中图标 -->
<!-- <template #label>
<span><img src="../assets/radio_checked.svg" alt="custom icon" style="width: 16px; height: 16px;"> {{ text }}</span>
</template> -->

101
src/components/GuipSwitch.vue
View File

@ -0,0 +1,101 @@
<template>
<div class="flex switchWrap">
<span class="switchDesc" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText }}</span>
<el-switch
v-model="internalValue"
:active-color="activeColor"
:inactive-color="inactiveColor"
:disabled="disabled || loading"
@change="handleChange">
<!-- 自定义开启时的图标 -->
<template #active-icon>
</template>
<!-- 自定义关闭时的图标 -->
<template #inactive-icon>
</template>
</el-switch>
</div>
</template>
<!-- 他这个描述文案不太符合当前使用暂且不用 -->
<!-- :active-text="activeText"
:inactive-text="inactiveText" -->
<script>
export default {
name: 'CustomSwitch',
props: {
activeText: {
type: String,
default: '',
},
inactiveText: {
type: String,
default: '',
},
modelValue: {
type: Boolean,
default: false,
},
activeColor: {
type: String,
default: '#00C261',
},
inactiveColor: {
type: String,
default: '#BABDC2',
},
disabled: {
type: Boolean,
default: false,
},
},
emits: ['update:modelValue', 'change'],
data() {
return {
internalValue: this.modelValue,
loading: false, // 加载状态
};
},
watch: {
modelValue(newVal) {
this.internalValue = newVal;
},
},
methods: {
// 处理 switch 状态变化
async handleChange(value) {
this.loading = true;
try {
// 模拟异步操作
await new Promise((resolve) => setTimeout(resolve, 1000));
this.internalValue = value;
this.$emit('update:modelValue', value);
this.$emit('change', value);
} catch (error) {
console.error('操作失败:', error);
} finally {
this.loading = false;
}
},
},
components: {
},
};
</script>
<style scoped>
.switchWrap{
align-items: center;
}
.switchDesc{
font-size: 12px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.08em;
font-variation-settings: "opsz" auto;
/* text/text_3 */
color: #626573;
display: inline-block;
margin-right: 15px;
}
</style>

126
src/components/GuipTable.vue
View File

@ -1,52 +1,86 @@
<template>
<el-table
ref="guiptable"
:data="tableData"
height="250"
:border="border"
@selection-change="handleSelectionChange"
:style="{width: width? width :'100%'}">
<!-- 多选 -->
<template v-if="multiple">
<el-table-column
type="selection"
width="55">
</el-table-column>
</template>
<el-table ref="guiptable" :data="tableData" height="250" :border="border" @selection-change="handleSelectionChange"
:style="{ width: width ? width : '100%' }">
<!-- 多选 -->
<template v-if="multiple">
<el-table-column type="selection" width="55">
</el-table-column>
</template>
<!-- 自定义header -->
<template v-if="autoColumn">
<slot name="header"></slot>
</template>
<!-- 通过json数据遍历渲染 -->
<template v-if="columns">
<el-table-column
v-for="column in columns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:width="column.width">
</el-table-column>
</template>
<template v-if="autoColumn">
<slot name="header"></slot>
</template>
<!-- 通过json数据遍历渲染 -->
<template v-if="columns">
<el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
:width="column.width">
<template #default="{ row }" v-if="column.popover">
<el-popover :visible="row[`popoverVisible_${column.prop}`]" class="tablePopover" placement="top" trigger="click">
<!-- 自定义内容插槽 -->
<slot :name="`popover-content-${column.prop}`" :row="row" :column="column">
<div>
<p>默认内容：{{ `popoverVisible_${column.prop}` }}</p>
<el-input v-model="row[`edit_${column.prop}`]" :placeholder="`请输入${column.label}`" />
</div>
</slot>
<!-- 确定和取消按钮 -->
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
<GuipButton size="medium" @click="handleCancel(row, column.prop)">取消</GuipButton>
<GuipButton type="primary" @click="handleConfirm(row, column.prop)" size="medium">确定</GuipButton>
</div>
<!-- 单元格内容 -->
<template #reference>
<span style="cursor: pointer">{{ row[column.prop] }}</span>
</template>
</el-popover>
</template>
</el-table-column>
</template>
</el-table>
</template>
<script>
export default {
name: 'GuipTextarea',
props:['tableData','width','autoColumn','columns','border','multiple'],
data() {
return {
</template>
<script>
import GuipButton from '@/components/GuipButton.vue';
export default {
name: 'GuipTextarea',
props: ['tableData', 'width', 'autoColumn', 'columns', 'border', 'multiple'],
data() {
return {
}
},
methods:{
handleSelectionChange(row){
// 获取的当前行信息
console.log(row,'======');
this.$emit('selectChange',row)
}
}
}
</script>
},
components: {
GuipButton
},
mounted(){
},
methods: {
handleSelectionChange(row) {
// 获取的当前行信息
console.log(row, '======');
this.$emit('selectChange', row)
},
// 点击确定按钮
handleConfirm(row, prop) {
// 将编辑后的值同步到原始数据
row[prop] = row[`edit_${prop}`];
row[`popoverVisible_${prop}`] = false; // 关闭气泡框
this.$emit('confirm', row, prop); // 触发确认事件
},
// 点击取消按钮
handleCancel(row, prop) {
// 恢复原始数据
row[`edit_${prop}`] = row[prop];
row[`popoverVisible_${prop}`] = false; // 关闭气泡框
this.$emit('cancel', row, prop); // 触发取消事件
},
}
}
</script>
<style scoped>
</style>

46
src/style/theme/common.scss
View File

@ -2,6 +2,10 @@
body{
font-family: Microsoft YaHei UI;
font-size: 14px;
p{
margin: 0;
padding: 0;
}
}
/* button==== start */
@ -307,12 +311,54 @@ body{
// table end
// dialog--start
.el-dialog{
min-height: 344px;
max-height: 550px;
border-radius: 4px;
background: #FFFFFF;
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
display: flex;
flex-direction: column;
.el-dialog__header{
font-size: 20px;
font-weight: bold;
line-height: 26px;
letter-spacing: 0.08em;
color: #1F2026;
padding: 32px 32px 12px;
}
.el-dialog__body{
padding: 0 32px 32px;
flex: 1;
}
}
.el-dialog__footer{
display: flex;
justify-content: center;
padding: 0 32px 32px !important;
.dialog-footer{
width: 100%;
justify-content: space-between;
}
button{
width: 247px;
height: 44px;
}
}
// dialog--end
// switch --start
// .el-switch__core{
// background-color: #00C261;
// }
// .el-switch.is-checked .el-switch__core{
// background-color: #BABDC2;
// }
// switch --end
.el-popover{
padding: 32px;
}
.flex{
display: flex;
align-items: center;

816
src/views/elementGroups.vue
View File

@ -1,230 +1,216 @@
<template>
<div class="elementWrap">
<!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
<div class="ele-item">
<label for="">单选框：</label>
<GuipRadio
v-model="form.language"
:options="languageOptions"
label="选择语言"
prop="language"
@change="radioChange"
:rules="rules.language"/>
</div>
<div class="ele-item">
<label for="">下拉框：</label>
<GuipSelect width="600px"
v-model="form.card" label="卡片" prop="card"
:options="options" defaultValue="选项1"/>
</div>
<div class="ele-item">
<label for="">表格：</label>
<GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
<GuipTable :tableData="tableData"
ref="multipleTable"
@selectChange="handleSelectionChange"
:multiple="true"
autoColumn="true" width="900px">
<template slot="header">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="150"></el-table-column>
<el-table-column prop="price" label="价格" width="150">
<!-- <template slot-scope="scope">
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
<div class="ele-item">
<label for="">单选框：</label>
<GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
@change="radioChange" :rules="rules.language" />
</div>
<div class="ele-item">
<label for="">下拉框：</label>
<GuipSelect width="600px" v-model="form.card" label="卡片" prop="card" :options="options"
defaultValue="选项1" />
</div>
<div >
<h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
<GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
<GuipTable :tableData="tableData" ref="multipleTable" @selectChange="handleSelectionChange"
:multiple="true" autoColumn="true" width="900px">
<template slot="header">
<el-table-column fixed prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="150"></el-table-column>
<el-table-column prop="name1" label="姓名" width="150"></el-table-column>
<el-table-column prop="name2" label="姓名" width="150"></el-table-column>
<el-table-column prop="name3" label="姓名" width="150"></el-table-column>
<el-table-column prop="name4" label="姓名" width="150"></el-table-column>
<el-table-column prop="name5" label="姓名" width="150"></el-table-column>
<el-table-column prop="name6" label="姓名" width="150"></el-table-column>
<el-table-column prop="name7" label="姓名" width="150"></el-table-column>
<el-table-column prop="name8" label="姓名" width="150"></el-table-column>
<el-table-column prop="name9" label="姓名" width="150"></el-table-column>
<el-table-column prop="name11" label="姓名" width="150"></el-table-column>
<el-table-column prop="name12" label="姓名" width="150"></el-table-column>
<el-table-column prop="price" label="价格" width="150">
<!-- <template slot-scope="scope">
<span @click="handlePriceClick(scope.row)">{{ scope.row.price }}</span>
</template> -->
<!-- 气泡弹出框 后期样式自定义-->
<template slot-scope="scope">
<el-popover trigger="click" placement="top">
<!-- <p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p> -->
<input type="text">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.price }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column prop="address1" label="地址测试"></el-table-column>
<el-table-column prop="price" label="价格">
<!-- 自定义渲染内容 -->
<template slot-scope="scope">
<GuipSelect
width="200px"
@change="changeSelect(scope.row)"
v-model="form.card" prop="card"
:options="options" defaultValue="选项1"/>
<!-- 气泡弹出框 后期样式自定义-->
<!-- <template slot-scope="scope">
<el-popover trigger="click" placement="top">
<input type="text">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.price }}</el-tag>
</div>
</el-popover>
</template> -->
</el-table-column>
<el-table-column prop="address" label="地址" width="200"> </el-table-column>
<el-table-column prop="address1" label="地址测试"></el-table-column>
<el-table-column prop="price2" label="价格" width="300">
<!-- 自定义渲染内容 -->
<template slot-scope="scope">
<GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card"
prop="card" :options="options" defaultValue="选项1" />
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<div class="flex">
<el-button @click="handleClick(scope.row)" type="text">查看</el-button>
<el-button type="text">编辑</el-button>
</div>
</template>
</el-table-column>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<div class="flex">
<el-button @click="handleClick(scope.row)" type="text">查看</el-button>
<el-button type="text">编辑</el-button>
</GuipTable>
</div>
<div >
<h3 for="">表格(带气泡框),内容自定义：</h3>
<GuipTable :tableData="tableData" :key="random()" ref="multipleTable" @selectChange="handleSelectionChange" :multiple="true"
autoColumn="true" width="900px" :columns="columns" @confirm="onConfirm"
@cancel="onCancel">
<!-- 自定义姓名列的气泡框内容 -->
<template #popover-content-name="{ row, column }">
<div>
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="排序" :prop="column.label"
placeholder="这是" />
</div>
</template>
</el-table-column>
</template>
</GuipTable>
</div>
<div class="ele-item">
<label for="">文本域：</label>
<GuipTextarea disabled :styleObject="styleObject"/>
</div>
<template #popover-content-age="{ row, column }">
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="年龄" :prop="column.label"
placeholder="这是" unit="岁" >
</GuipInput>
</template>
<!-- 自定义地址列的气泡框内容 -->
<template #popover-content-address="{ row, column }">
<div>
<p>自定义内容：{{ column.label }}</p>
<el-select v-model="row[`edit_${column.prop}`]" placeholder="请选择">
<el-option label="北京市" value="北京市" />
<el-option label="上海市" value="上海市" />
<el-option label="广州市" value="广州市" />
</el-select>
</div>
</template>
</GuipTable>
</div>
<div class="ele-item">
<label for="">文本域：</label>
<GuipTextarea disabled :styleObject="styleObject" />
</div>
<div class="ele-item">
<label for="">输入框：</label>
<GuipInput
ref="GuipInput"
width="200px"
height="30px"
disabled
placeholder="这是自定义默认提示语"/>
<div style="width: 20px;height: 10px;"></div>
<GuipInput
ref="GuipInput"
:styleObject="styleObject1"
defaultValue="爱吃麻辣烫"
:maxlength="100"
@change="handleInput"
@blur="handleInput"
@input="handleInput"
@focus="handleInput"
placeholder="这是自定义默认提示语"/>
<div style="width: 20px;height: 10px;"></div>
<GuipInput
:defaultValue="defaultValue"
@clear="handleClear"
width="400px"
>
<span slot="prependshow">http:</span>
<img slot="prefix" src="../assets/radio_checked.svg" alt="">
<!-- 输入框后面小图标 -事件自定义 -->
<i slot="suffix" class="el-icon-close" @click="handleClear"></i>
<!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<span slot="appendshow" >.checkcopy.com</span>
</GuipInput>
<!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
</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="reverseMild">按钮</GuipButton>
<GuipButton type="primary" loading>按钮</GuipButton>
<GuipButton type="success" :plain="plain">按钮</GuipButton>
<GuipButton type="info" :plain="plain">按钮</GuipButton>
<GuipButton type="warning" :plain="plain">按钮</GuipButton>
<GuipButton type="danger" :plain="plain">按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">禁用按钮：</label>
<GuipButton disabled >默认按钮</GuipButton>
<GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton>
<GuipButton type="reverseMild" disabled>按钮</GuipButton>
<GuipButton type="primary" size="medium" disabled>按钮</GuipButton>
<GuipButton type="success" disabled>按钮</GuipButton>
<GuipButton type="info" disabled>按钮</GuipButton>
<GuipButton type="warning" disabled>按钮</GuipButton>
<GuipButton type="danger" disabled>按钮</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> -->
<!-- <el-form :model="form" :rules="rules" ref="myForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<div style="display: flex;">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="triggerError">触发错误</el-button>
</div>
</el-form> -->
</div>
<div class="ele-item">
<label for="">输入框：</label>
<GuipInput ref="GuipInput" width="200px" height="30px" disabled placeholder="这是自定义默认提示语" />
<div style="width: 600px;">
<h3>表单左右布局（直接使用封装好的input）</h3>
<!-- 表单左右布局 -->
<GuipInput
ref="GuipInput"
addClass="w510"
v-model="form.username" label="Username" prop="username" :rules="usernameRules"
placeholder="这是自定义默认提11示语"/>
</div>
<div style="width: 20px;height: 10px;"></div>
<div style="width: 800px;height: 150px;">
<h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
<GuipInput
ref="GuipInput"
column="column"
addClass="w510"
label="age"
desc="这是是右侧文案"
v-model="form.age" prop="age"
placeholder="这是自定义默认提示语"/>
</div>
<GuipInput ref="GuipInput" :styleObject="styleObject1" defaultValue="爱吃麻辣烫" :maxlength="100"
@change="handleInput" @blur="handleInput" @input="handleInput" @focus="handleInput"
placeholder="这是自定义默认提示语" />
<div style="width: 600px;height: 150px;">
<h3>获取手机验证码(布局也可更改，使用插槽自定义展示内容)</h3>
<GuipFormItem
column="column"
addClass="w388"
>
<!-- 这个 form-top-icon 类名已经有样式，除此布局外需要自定义添加样式 -->
<div slot="formLeft" class="form-top-icon">
<img src="../assets/phone-fill.svg" alt="">
<span>手机号码</span>
</div>
<PhoneCode slot="formDom"></PhoneCode>
</GuipFormItem>
</div>
<el-button type="primary" @click="submitForm">表单Submit</el-button>
<div style="width: 20px;height: 10px;"></div>
<GuipInput :defaultValue="defaultValue" @clear="handleClear" width="400px">
<span slot="prependshow">http:</span>
<img slot="prefix" src="../assets/radio_checked.svg" alt="">
<!-- 输入框后面小图标 -事件自定义 -->
<i slot="suffix" class="el-icon-close" @click="handleClear"></i>
<!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<span slot="appendshow">.checkcopy.com</span>
</GuipInput>
<!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
</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>
</el-form>
<div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">--------------------分割线0------------------------------</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="reverseMild">按钮</GuipButton>
<GuipButton type="primary" loading>按钮</GuipButton>
<GuipButton type="success" :plain="plain">按钮</GuipButton>
<GuipButton type="info" :plain="plain">按钮</GuipButton>
<GuipButton type="warning" :plain="plain">按钮</GuipButton>
<GuipButton type="danger" :plain="plain">按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">禁用按钮：</label>
<GuipButton disabled>默认按钮</GuipButton>
<GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton>
<GuipButton type="reverseMild" disabled>按钮</GuipButton>
<GuipButton type="primary" size="medium" disabled>按钮</GuipButton>
<GuipButton type="success" disabled>按钮</GuipButton>
<GuipButton type="info" disabled>按钮</GuipButton>
<GuipButton type="warning" disabled>按钮</GuipButton>
<GuipButton type="danger" disabled>按钮</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 style="width: 600px;">
<h3>表单左右布局（直接使用封装好的input）</h3>
<!-- 表单左右布局 -->
<GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username"
:rules="usernameRules" placeholder="这是自定义默认提11示语" />
</div>
<div style="width: 800px;height: 150px;">
<h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
<GuipInput ref="GuipInput" column="column" addClass="w510" label="age" desc="这是是右侧文案" v-model="form.age"
prop="age" placeholder="这是自定义默认提示语" />
</div>
<div style="width: 600px;height: 150px;">
<h3>获取手机验证码(布局也可更改，使用插槽自定义展示内容)</h3>
<GuipFormItem column="column" addClass="w388">
<!-- 这个 form-top-icon 类名已经有样式，除此布局外需要自定义添加样式 -->
<div slot="formLeft" class="form-top-icon">
<img src="../assets/phone-fill.svg" alt="">
<span>手机号码</span>
</div>
<PhoneCode slot="formDom"></PhoneCode>
</GuipFormItem>
</div>
<el-button type="primary" @click="submitForm">表单Submit</el-button>
</el-form>
<div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">
--------------------分割线0------------------------------</div>
<div style="display: flex;">
<!-- <GuipButton type="primary" @click="showModal">弹框</GuipButton>
@ -251,47 +237,53 @@
<el-button type="primary" @click="openDialog">打开弹框</el-button>
<GuipDialog
:dialogVisible="dialogVisible"
title="自定义标题"
:show-close-button="showCloseButton"
:show-cancel-button="showCancelButton"
@confirm="handleConfirm"
@cancel="handleCancel"
@close="handleClose"
@dialogVisibleChange="dialogVisibleChange"
>
<!-- 自定义内容 -->
<div>
<p>这是一个自定义内容的弹框。</p>
<el-input placeholder="请输入内容"></el-input>
</div>
<GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
@dialogVisibleChange="dialogVisibleChange">
<!-- 自定义内容 -->
<div>
<p>这是一个自定义内容的弹框。</p>
</div>
</GuipDialog>
<!-- <el-switch v-model="switchValue1" active-text="按月付费" inactive-text="按年付费">
</el-switch>
<el-switch style="display: block" v-model="switchValue2" active-color="#13ce66"
active-text="按月付费" inactive-text="按年付费">
</el-switch> -->
<div class="ele-item">
<label for="">开关L</label>
<GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch>
</div>
</div>
</template>
<script>
</template>
<script>
import { rules } from "../assets/vabForm";
// @ is an alias to /src
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipRadio from '@/components/GuipRadio.vue';
// @ is an alias to /src
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipRadio from '@/components/GuipRadio.vue';
// import GuipForm from '@/components/GuipForm.vue';
import PhoneCode from '@/components/PhoneCode.vue';
import GuipButton from '@/components/GuipButton.vue';
import PhoneCode from '@/components/PhoneCode.vue';
import GuipButton from '@/components/GuipButton.vue';
// import GuipConfirm from '@/components/GuipConfirm.vue';
import GuipInput from '@/components/GuipInput.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 {
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,
GuipSwitch,
// GuipForm,
GuipDialog,
GuipRadio,
@ -303,21 +295,21 @@ import { rules } from "../assets/vabForm";
// GuipModal,
GuipSelect
},
data(){
data() {
return {
switchValue: true,
dialogVisible: false,//是否展示弹框
showCancelButton: true, // 控制是否显示取消按钮
showCloseButton: true, // 控制是否显示关闭按钮
// inputValue: '',
form: {
username: '',
language:'',
language: '',
},
languageOptions: [
{ label: 'JavaScript', value: 'js' },
{ label: 'Python', value: 'py' },
{ label: 'Java', value: 'java', disabled: true }, // 禁用选项
{ label: 'Go', value: 'go' },
{ label: 'JavaScript', value: 'js',selectedLabel:'JavaScripthhhhhhhhhh' },
{ label: 'Python', value: 'py',selectedLabel:'JavaScripthhhhhhhhhh' },
{ label: 'Java', value: 'java', disabled: true,selectedLabel:'JavaScripthhhhhhhhhh' }, // 禁用选项
{ label: 'Go', value: 'go' ,selectedLabel:'JavaScripthhhhhhhhhh' },
],
rules: {
username: [
@ -336,7 +328,7 @@ import { rules } from "../assets/vabForm";
{ required: true, message: '请输入年龄', trigger: 'blur' }
]
},
usernameRules:[{ required: true, message: 'Username is required', trigger: 'blur' }],//单独自定义rules
usernameRules: [{ required: true, message: 'Username is required', trigger: 'blur' }],//单独自定义rules
msg: "测试",
title: "相关附件",
edit: false,
@ -359,139 +351,166 @@ import { rules } from "../assets/vabForm";
textareaIner: "textarea",
dateTime: "2023-09-12 00:00:00",
uploadList: [
{
name: "小梨猫.jpg",
size: 160517,
uid: 1695291434025,
url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
},
{
name: "小梨猫.jpg",
size: 160517,
uid: 1695291434025,
url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
},
],
},
// 表格数据
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
price: '20',
age:20,
// 在支持修改的项目中，需要主动保留一份原始数据
edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎11',
address: '上海市普陀区金沙江路 151811 弄',
price: '10',
age:30,
edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
price: '200',
}, {
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 弄'
}],
// 表格列配置
columns: [
{ prop: 'name', label: '姓名（带气泡）', popover: true }, // 支持气泡框
{ prop: 'age', label: '年龄', popover: true }, // 不支持气泡框
{ prop: 'address', label: '地址（带气泡）', popover: true }, // 支持气泡框
],
optionss: [
{
value: "选项1",
label: "黄金糕",
value: "选项1",
label: "黄金糕",
},
{
value: "选项2",
label: "双皮奶",
value: "选项2",
label: "双皮奶",
},
{
value: "选项3",
label: "蚵仔煎",
value: "选项3",
label: "蚵仔煎",
},
{
value: "选项4",
label: "龙须面",
value: "选项4",
label: "龙须面",
},
{
value: "选项5",
label: "北京烤鸭",
value: "选项5",
label: "北京烤鸭",
},
],
cities: [
{
value: "Beijing",
label: "北京",
value: "Beijing",
label: "北京",
},
{
value: "Shanghai",
label: "上海",
value: "Shanghai",
label: "上海",
},
{
value: "Nanjing",
label: "南京",
value: "Nanjing",
label: "南京",
},
{
value: "Chengdu",
label: "成都",
value: "Chengdu",
label: "成都",
},
{
value: "Shenzhen",
label: "深圳",
value: "Shenzhen",
label: "深圳",
},
{
value: "Guangzhou",
label: "广州",
value: "Guangzhou",
label: "广州",
}
],
input:'hahhahah',
defaultValue:'asdasda',
radio:3,
radio1:5,
btnstyleObj:{
input: 'hahhahah',
defaultValue: 'asdasda',
radio: 3,
radio1: 5,
btnstyleObj: {
width: '247px',
height: '44px',
background: '#F2F7FF',
borderRadius: '2px',
fontSize:'14px',
fontSize: '14px',
letterSpacing: '0.08em',
color: '#006AFF !important'
},
btnstyleObj1:{
btnstyleObj1: {
width: '180px',
height: '40px',
},
styleObject:{
width:'200px',
height:'40px'
styleObject: {
width: '200px',
height: '40px'
},
styleObject1:{
width:'600px',
height:'50px'
styleObject1: {
width: '600px',
height: '50px'
},
plain:false,
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
price:'20',
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
price:'10',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
price:'200',
}, {
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 弄'
}],
plain: false,
options: [{
value: '选项1',
label: '黄金糕'
value: '选项1',
label1:'黄金hhhhhh',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
value: '选项2',
label1:'双皮奶hhhhhhhhh',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
value: '选项3',
label1:'蚵仔煎hhhhhhhhh',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
value: '选项4',
label1:'双皮奶hhhhhhhhh',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
value: '选项5',
label1:'双皮奶hhhhhhhhh',
label: '北京烤鸭'
}],
}
},
methods:{
methods: {
// 部分情况可能导致页面不更新，增加 key 强制重新渲染
random(){
var randomNumber = Math.random();
return randomNumber
},
onSwitchChange(value) {
console.log('Switch 状态变化:', value);
},
// 弹框相关方法---start
openDialog() {
this.dialogVisible = true;
@ -511,8 +530,8 @@ import { rules } from "../assets/vabForm";
this.$message.info('弹框已关闭');
this.dialogVisible = false;
},
dialogVisibleChange(data){
console.log(data,'data098908090');
dialogVisibleChange(data) {
console.log(data, 'data098908090');
},
// 弹框相关方法---end
@ -522,20 +541,37 @@ import { rules } from "../assets/vabForm";
this.editedPrice = row.price;
this.dialogVisible = true;
},
// 表格气泡框-----
// 确认事件
onConfirm(row, prop) {
console.log('确认修改:', row, prop);
this.$message.success('修改成功');
this.$set(this.tableData,row)
console.log(this.tableData,'this.tableData=====');
},
// 取消事件
onCancel(row, prop) {
console.log('取消修改:', row, prop);
this.$message.info('已取消');
this.$set(this.tableData,row)
},
// 表格气泡框-----
// 监听单选框组变化
radioChange(data){
console.log(data,'radio--data');
radioChange(data) {
console.log(data, 'radio--data');
},
handleClick(row) {
console.log(row);
},
submitForm() {
this.$refs.formRef.validate((valid) => {
console.log(this.form,'======formxinxi');
console.log(this.form, '======formxinxi');
if (valid) {
alert('提交成功!');
alert('提交成功!');
} else {
return false;
return false;
}
});
},
@ -546,47 +582,47 @@ import { rules } from "../assets/vabForm";
triggerError() {
this.$refs.formRef.validateField('username', (error) => {
if (error) {
console.log('错误信息:', error);
console.log('错误信息:', error);
} else {
console.log('无错误');
console.log('无错误');
}
});
},
getFormdata(){
getFormdata() {
console.log(this.$refs.GuipInput.value);
},
handleInput(value){
console.log(value,'value===输入框输入得知');
handleInput(value) {
console.log(value, 'value===输入框输入得知');
},
handleClear(value){
handleClear(value) {
this.defaultValue = '这是我清除后给的文案'
// this.handleInput('')
console.log(value,'value===qinghcu');
console.log(value, 'value===qinghcu');
},
getList() {
const dataList = rules();
dataList.forEach((item) => {
if (item.field === "id") {
item.options = this.cities;
item.options = this.cities;
}
if (item.field === "id1") {
item.options = this.optionss;
item.options = this.optionss;
}
});
this.formList = dataList;
},
save() {
this.$refs.VabForm.submitForm("ruleForm");
this.$refs.VabForm.submitForm("ruleForm");
},
//取消
cancellation() {
this.$refs.VabForm.resetForm("ruleForm");
},
// 表格点击、选择
handleSelectionChange(data){
handleSelectionChange(data) {
// 多选模式下的时候 data 为数组格式
// 单选的时候是 对象
console.log(data,'表格行信息');
console.log(data, '表格行信息');
},
// 全选按钮
toggleAllSelection() {
@ -598,44 +634,46 @@ import { rules } from "../assets/vabForm";
this.getList();
},
}
</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;
}
}
</script>
<style lang="scss" scoped>
.elementWrap {
/* width: 100%; */
padding: 30px 40px;
.ele-item {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 20px 0 30px;
label {
font-size: 16px;
font-weight: bold;
width: 100px;
margin-right: 10px;
text-align: left;
}
}
}
.ScaleBox {
width: 1000px;
background-size: 100% 100%;
-ms-transition: 0.3s;
transition: 0.3s;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
margin: 0 auto;
width: 1000px;
background-size: 100% 100%;
-ms-transition: 0.3s;
transition: 0.3s;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
margin: 0 auto;
}
.cardfooter {
width: 100%;
// position: fixed;
bottom: 20px;
right: 30px;
text-align: right;
justify-content: center;
width: 100%;
// position: fixed;
bottom: 20px;
right: 30px;
text-align: right;
justify-content: center;
}
</style>
</style>
Write Preview
Loading…
Cancel
Save