|
|
|
@ -208,9 +208,15 @@ |
|
|
|
</div> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">独特按钮：可以自定义划过时 图标图片、文字颜色</label> |
|
|
|
<hover-button button-text="上传文件" :default-icon="require('../assets/upLoad_grey.svg')" |
|
|
|
<hover-button button-text="默认样式" :default-icon="require('../assets/upLoad_grey.svg')" |
|
|
|
:hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B" |
|
|
|
hover-text-color="#006AFF" @click="btnClick" /> |
|
|
|
<!-- 宽高单独传递 、其余统一放置在 customStyle 中--> |
|
|
|
<hover-button button-text="自定义" :default-icon="require('@/assets/site/addIcon.svg')" |
|
|
|
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#626573" |
|
|
|
hover-text-color="#006AFF" width="110px" height="32px" |
|
|
|
:customStyle="{ fontSize: '12px', background: '#fff', borderRadius: '2px', borderColor: '#DFE2E6' }" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">独特按钮单独写样式：</label> |
|
|
|
@ -289,7 +295,13 @@ |
|
|
|
|
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">开关L</label> |
|
|
|
<GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange"> |
|
|
|
<!-- active-value 开启状态的值 --> |
|
|
|
<!-- inactive-value 关闭状态的值 --> |
|
|
|
<GuipSwitch :modelValue="switchValue" activeText="默认类型" inactiveText="关闭" @change="onSwitchChange"> |
|
|
|
</GuipSwitch> |
|
|
|
<GuipSwitch :modelValue="switchValue1" :active-value="1" :inactive-value="0" activeText="number" @change="onSwitchChange"> |
|
|
|
</GuipSwitch> |
|
|
|
<GuipSwitch :modelValue="switchValue2" active-value="0" inactive-value="1" activeText="string" @change="onSwitchChange"> |
|
|
|
</GuipSwitch> |
|
|
|
</div> |
|
|
|
<div class="flex ele-item"> |
|
|
|
@ -305,8 +317,7 @@ |
|
|
|
<!--触发 真实下拉操作 --> |
|
|
|
<!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label--> |
|
|
|
<CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="form.domainSuffix1" |
|
|
|
:options="domainOptions" @change="changeSelectIp" |
|
|
|
placeholder="请选择"> |
|
|
|
:options="domainOptions" @change="changeSelectIp" placeholder="请选择"> |
|
|
|
<template #normal> |
|
|
|
<div class="flex flex-between noraml-jump"> |
|
|
|
<div class="left"> |
|
|
|
@ -383,11 +394,11 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template #item="{ item }"> |
|
|
|
<div class="flex-between"> |
|
|
|
<p>测试一下自定义内容{{ item. id}} + {{ item.label }}</p> |
|
|
|
<p>易烊千玺/田栩宁</p> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<div class="flex-between"> |
|
|
|
<p>测试一下自定义内容{{ item.id }} + {{ item.label }}</p> |
|
|
|
<p>易烊千玺/田栩宁</p> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</CustomDropdown> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -422,7 +433,8 @@ |
|
|
|
</div> |
|
|
|
<div class="flex ele-item"> |
|
|
|
<label for="">一些功能集合</label> |
|
|
|
<GuipButton type="primary" @click="openDialog">打开弹框</GuipButton> |
|
|
|
<GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog">打开弹框（标题巨左、按钮居右）</GuipButton> |
|
|
|
<GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中）</GuipButton> |
|
|
|
<GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -456,6 +468,14 @@ |
|
|
|
<p>这是一个自定义内容的弹框。</p> |
|
|
|
</div> |
|
|
|
</GuipDialog> |
|
|
|
<GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题" :show-close-button="false" |
|
|
|
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" |
|
|
|
@close="handleClose" @dialogVisibleChange="dialogVisibleChange"> |
|
|
|
<!-- 自定义内容 --> |
|
|
|
<div> |
|
|
|
<p>这是一个自定义内容的弹框。</p> |
|
|
|
</div> |
|
|
|
</GuipDialog> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -477,7 +497,6 @@ import HoverButton from '@/components/HoverButton.vue' |
|
|
|
import GuipFormItem from '@/components/GuipFormItem.vue' |
|
|
|
import SvgIcon from '@/components/SvgIcon.vue'; |
|
|
|
|
|
|
|
// import { mapState } from 'vuex' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'HomeView', |
|
|
|
@ -557,6 +576,9 @@ export default { |
|
|
|
timer: null, |
|
|
|
date1: '', |
|
|
|
switchValue: true, |
|
|
|
switchValue1: 1, |
|
|
|
switchValue2: '0', |
|
|
|
dialogVisible1: false, |
|
|
|
dialogVisible: false,//是否展示弹框 |
|
|
|
showCancelButton: true, // 控制是否显示取消按钮 |
|
|
|
showCloseButton: true, // 控制是否显示关闭按钮 |
|
|
|
@ -851,7 +873,7 @@ export default { |
|
|
|
changeSelectIp(item) { |
|
|
|
// 选中项 |
|
|
|
// this.selectedItem1 = { ...item }; |
|
|
|
console.log(item, this.form.domainSuffix,this.form.domainSuffix1, '选中的项-值-'); |
|
|
|
console.log(item, this.form.domainSuffix, this.form.domainSuffix1, '选中的项-值-'); |
|
|
|
}, |
|
|
|
arraySpanMethod({ row, column, rowIndex, columnIndex }) { |
|
|
|
console.log(row, column); |
|
|
|
@ -969,6 +991,9 @@ export default { |
|
|
|
openDialog() { |
|
|
|
this.dialogVisible = true; |
|
|
|
}, |
|
|
|
openDialog1() { |
|
|
|
this.dialogVisible1 = true; |
|
|
|
}, |
|
|
|
// 确认按钮事件 |
|
|
|
handleConfirm() { |
|
|
|
this.$message.success('点击了确认按钮'); |
|
|
|
@ -978,6 +1003,7 @@ export default { |
|
|
|
handleCancel() { |
|
|
|
this.$message.warning('点击了取消按钮'); |
|
|
|
this.dialogVisible = false; |
|
|
|
this.dialogVisible1 = false; |
|
|
|
}, |
|
|
|
// 关闭弹框事件 |
|
|
|
handleClose() { |
|
|
|
@ -1054,7 +1080,6 @@ export default { |
|
|
|
console.log(value, 'value===qinghcu'); |
|
|
|
}, |
|
|
|
getList() { |
|
|
|
console.log('zhixingle--'); |
|
|
|
const dataList = rules(); |
|
|
|
dataList.forEach((item) => { |
|
|
|
if (item.field === "id") { |
|
|
|
@ -1117,6 +1142,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 组合框样式 start |
|
|
|
// input drop组合使用 |
|
|
|
.combo-formItem { |
|
|
|
@ -1138,11 +1164,13 @@ export default { |
|
|
|
border-radius: 2px 0 0 2px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.self-drop-wrap { |
|
|
|
position: absolute; |
|
|
|
z-index: 1; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.appendDrop { |
|
|
|
height: 38px; |
|
|
|
align-items: center; |
|
|
|
@ -1155,6 +1183,7 @@ export default { |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
border: 1px solid #006AFF; |
|
|
|
} |
|
|
|
|
zq
6 days ago