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

Merge pull request '下拉输入组合框实现、增加示例' (#57) from zq-dropInput into master 

Reviewed-on: #57
pull/60/head
zhangqi 6 days ago
parent
19af8b9456 a5049b2d04
commit
86d41ac2fe
5 changed files with 379 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/App.vue
  2. 1
      src/components/Breadcrumb.vue
  3. 73
      src/components/CustomDropdown.vue
  4. 172
      src/views/agent/siteBaseSetting.vue
  5. 209
      src/views/elementGroups.vue

8
src/App.vue
View File

@ -8,17 +8,18 @@
<div class="bg"></div> <div class="bg"></div>
</el-header> </el-header>
<el-container :class="(showHeader ? 'short-container' : '')"> <el-container :class="(showHeader ? 'short-container' : '')">
<!-- 侧边栏 -->
<SliderMenu v-if="showSidebar" :menuData="slidermenu" :customize="customize"></SliderMenu> <SliderMenu v-if="showSidebar" :menuData="slidermenu" :customize="customize"></SliderMenu>
<!-- <SliderMenu v-if="showSidebar" :menuData="menuData"></SliderMenu> -->
<el-container class="main-right-content"> <el-container class="main-right-content">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<Breadcrumb /> <Breadcrumb />
<el-main class="app-content"> <el-main class="app-content">
<!-- loading -->
<global-loading> <global-loading>
<!-- 页面内容 -->
<router-view /> <router-view />
</global-loading> </global-loading>
</el-main> </el-main>
<!-- <Footer v-if="showFooter"></Footer> -->
</el-container> </el-container>
</el-container> </el-container>
</el-container> </el-container>
@ -47,10 +48,9 @@ export default {
Breadcrumb Breadcrumb
}, },
computed: { computed: {
...mapState(['showSidebar', 'showFooter', 'showHeader','slidermenu','customize']) // 从Vuex映射showSidebar状态到组件的计算属性中 ...mapState(['showSidebar','showHeader','slidermenu','customize']) // 从Vuex映射showSidebar状态到组件的计算属性中
}, },
mounted() { mounted() {
console.log(this.showFooter,'showFooter----');
window.addEventListener('beforeunload', this.clearStorage); window.addEventListener('beforeunload', this.clearStorage);
}, },
beforeUnmount() { beforeUnmount() {

1
src/components/Breadcrumb.vue
View File

@ -8,7 +8,6 @@
<template v-if="index !== breadcrumbs.length - 1"> <template v-if="index !== breadcrumbs.length - 1">
<router-link to="/" v-if="item.title == '首页'"> <router-link to="/" v-if="item.title == '首页'">
<SvgIcon1 :iconPath="require(`@/assets/menu/home-bread.svg`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"/> <SvgIcon1 :iconPath="require(`@/assets/menu/home-bread.svg`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"/>
<!-- <img class="home-icon" src="@/assets/menu/home-bread.svg" alt="首页"> -->
</router-link> </router-link>
<router-link v-else :to="item.path">{{ item.title }}</router-link> <router-link v-else :to="item.path">{{ item.title }}</router-link>
<img class="separator" src="@/assets/separator.png" alt=""> <img class="separator" src="@/assets/separator.png" alt="">

73
src/components/CustomDropdown.vue
View File

@ -1,36 +1,41 @@
<template> <template>
<div class="custom-select" v-clickaway="closeDropdown" ref="dropdown" :class="{ 'is-open': isOpen }" :style="{width}"> <div class="custom-select" v-clickaway="closeDropdown" ref="dropdown" :class="{ 'is-open': isOpen }" :style="{width}">
<!-- 触发按钮 --> <!-- 触发按钮 -->
<div class="select-trigger" @click="toggleDropdown"> <div class="select-trigger" @click="toggleDropdown">
<slot name="trigger"> <slot name="trigger">
{{ selectedItem ? selectedItem.label : placeholder }} {{ selectedItem ? selectedItem[displayKey] : placeholder }}
</slot> </slot>
<img class="arrow-icon" :src="isOpen? require('../assets/dropDown_open.png'):require('../assets/dropDown_expand.png')" alt=""> <img class="arrow-icon" :src="isOpen? require('../assets/dropDown_open.png'):require('../assets/dropDown_expand.png')" alt="">
<!-- <span class="arrow-icon">{{ isOpen ? img : "▼" }}</span> -->
</div> </div>
<!-- 自定义内容 -->
<!-- 下拉内容 --> <!-- 下拉内容 -->
<transition name="slide-fade"> <transition name="slide-fade">
<div v-if="isOpen" class="select-dropdown"> <div v-if="isOpen" class="select-dropdown">
<slot v-if="isOpen" name="normal"></slot> <slot v-if="isOpen" name="normal"></slot>
<div v-if="options"> <div v-if="options">
<div v-for="(item, index) in options" :key="index" class="dropdown-item" <div v-for="(item, index) in options" :key="index" class="dropdown-item "
:class="{ 'is-selected': isSelected(item) }" @click="selectItem(item)"> :class="{ 'is-selected': isSelected(item) }" @click="selectItem(item)">
<slot name="item" :item="item"> <slot name="item" :item="item" >
{{ item.label }} <div class="flex-between">
<div class="left">
<p class="one">{{ item[displayKey] }}</p>
</div>
<div class="right">
<img v-if="selectedItem[displayKey] == item[displayKey]"
src="../assets/register/drop-selected.svg" alt="">
</div>
</div>
</slot> </slot>
</div> </div>
</div> </div>
<!-- <slot v-if="isOpen" name="options_null"></slot> --> <div class="flex-between dropdown-item" v-if="options_null" @click="selectNullItem">
<div class="flex-between dropdown-item" v-if="options_null" @click="selectNullItem">
<div class="left"> <div class="left">
<p class="one">暂无收款账号</p> <p class="one">暂无收款账号</p>
<p>暂时没有收款账号，我想稍后配置</p> <p>暂时没有收款账号，我想稍后配置</p>
</div> </div>
<div class="right"> <div class="right">
<img src="../assets/register/drop-selected.svg" alt=""> <img src="../assets/register/drop-selected.svg" alt="">
</div> </div>
</div> </div>
</div> </div>
@ -39,16 +44,14 @@
</template> </template>
<script> <script>
// import { mixin as clickaway } from 'vue-clickaway';
export default { export default {
props: { props: {
width:{ width: {
type: String, type: String,
default: "200px", default: "200px",
}, },
options: { options: {
type: Array, type: Array,
// required: true,
default: () => [], default: () => [],
}, },
options_null: { options_null: {
@ -63,27 +66,26 @@ export default {
type: [String, Number, Object], type: [String, Number, Object],
default: null, default: null,
}, },
valueKey: {
type: String,
default: "value",
},
displayKey: {
type: String,
default: "label",
},
}, },
// mixins: [clickaway],
data() { data() {
return { return {
isOpen: false, isOpen: false,
selectedItem: null, selectedItem: null,
}; };
}, },
mounted(){
// document.addEventListener('click', this.handleClickOutside);
},
beforeUnmount() {
// 移除监听
// document.removeEventListener('click', this.handleClickOutside);
},
watch: { watch: {
value: { value: {
immediate: true, immediate: true,
handler(newVal) { handler(newVal) {
this.selectedItem = this.options.find((item) => item.value === newVal); this.selectedItem = this.options.find((item) => item[this.valueKey] === newVal);
}, },
}, },
}, },
@ -91,21 +93,23 @@ export default {
closeDropdown() { closeDropdown() {
this.isOpen = false; this.isOpen = false;
}, },
toggleDropdown() { toggleDropdown(e) {
if(e) {
e.stopPropagation();
}
this.isOpen = !this.isOpen; this.isOpen = !this.isOpen;
}, },
selectItem(item) { selectItem(item) {
this.selectedItem = item; this.selectedItem = item;
this.$emit("input", item.value); // 更新 v-model 的值 this.$emit("input", item[this.valueKey]); // Use the specified valueKey
this.$emit("change", item); // 触发 change 事件 this.$emit("change", item);
this.isOpen = false; this.isOpen = false;
}, },
isSelected(item) { isSelected(item) {
return this.selectedItem && this.selectedItem.value === item.value; return this.selectedItem && this.selectedItem[this.valueKey] === item[this.valueKey];
}, },
selectNullItem(){ selectNullItem() {
// this.$emit("input", null); // 更新 v-model 的值 this.$emit("changeNormal", '');
this.$emit("changeNormal", ''); // 触发 change 事件
this.isOpen = false; this.isOpen = false;
} }
}, },
@ -113,6 +117,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
/* Your existing styles remain the same */
.custom-select { .custom-select {
height: 38px; height: 38px;
position: relative; position: relative;
@ -176,8 +181,8 @@ export default {
} }
.dropdown-item.is-selected { .dropdown-item.is-selected {
background-color: transparent; background-color: #F6F7FA;
color: #fff; color: #006AFF;
} }
/* 展开收起动画 */ /* 展开收起动画 */

172
src/views/agent/siteBaseSetting.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="main-content12"> <div class="main-content12">
<!-- page header --> <!-- page header -->
<div class="pageheader"> <div class="pageheader">
<span class="pagetitle">基本设置</span> <span class="pagetitle">基本设置</span>
</div> </div>
@ -12,18 +12,18 @@
<el-form> <el-form>
<div class="flex-wrap"> <div class="flex-wrap">
<div class="flex-left"> <div class="flex-left">
<GuipInput ref="GuipInput" column="column" label="站点简称" :maxlength="10" :showWordLimit="true" <GuipInput ref="GuipInput" column="column" label="站点简称" :maxlength="10"
desc="一个站点对应一个销售渠道，定义好名字好区分" v-model="siteInfo.short_name" prop="short_name" :showWordLimit="true" desc="一个站点对应一个销售渠道，定义好名字好区分" v-model="siteInfo.short_name"
placeholder="仅自己区分站点销售渠道，客户看不到" /> prop="short_name" placeholder="仅自己区分站点销售渠道，客户看不到" />
<GuipInput ref="GuipInput" column="column" label="公司电话" desc="在站点首页底部“关于我们”展示" <GuipInput ref="GuipInput" column="column" label="公司电话" desc="在站点首页底部“关于我们”展示"
v-model="siteInfo.phone_num" prop="company_phone" placeholder="非必填" /> v-model="siteInfo.phone_num" prop="company_phone" placeholder="非必填" />
</div> </div>
<div class="flex-line"></div> <div class="flex-line"></div>
<div class="flex-right"> <div class="flex-right">
<GuipTextarea v-model="siteInfo.company_name" label="详细介绍" column="column" prop="doctor_detail" <GuipTextarea v-model="siteInfo.company_name" label="详细介绍" column="column"
width="100%" height="90px" placeholder="请输入描述内容" desc="在站点首页底部“关于我们”展示" prop="doctor_detail" width="100%" height="90px" placeholder="请输入描述内容"
show-word-limit /> desc="在站点首页底部“关于我们”展示" show-word-limit />
</div> </div>
</div> </div>
</el-form> </el-form>
@ -42,10 +42,47 @@
</div> </div>
<div class="flex-line"></div> <div class="flex-line"></div>
<div class="flex-right"> <div class="flex-right">
<GuipFormItem column="column" label="域名设置" required="true"> <!-- <GuipFormItem column="column" label="域名设置" required="true">
<GuipInput slot="formDom" v-model="siteForm1.domain_set" placeholder="仅支持数字、字母"> <GuipInput slot="formDom" v-model="siteForm1.domain_set" placeholder="仅支持数字、字母">
<span slot="appendshow">.chachongz.com</span> <span slot="appendshow">.chachongz.com</span>
</GuipInput> </GuipInput>
</GuipFormItem> -->
<GuipFormItem column="column" class="combo-formItem" label="域名设置" required="true">
<div slot="formDom" class="self-drop-wrap flex" style="width: 100%;">
<GuipInput style="width: 60%;" v-model="siteForm1.domain_set"
placeholder="仅支持数字、字母">
</GuipInput>
<div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{
siteForm1.domainSuffix }}</div>
</div>
<CustomDropdown slot="formDom" ref="dropDomain" width="100%"
v-model="siteForm1.domainSuffix" :options="domainOptions" @change="changeSelectIp"
placeholder="请选择">
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>添加新域名</b>
<p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
<p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
</div>
<div class="right">
<GuipButton size="form">前往绑定</GuipButton>
</div>
</div>
</template>
<!-- 自定义下拉选项 -->
<!-- <template #item="{ item }">
<div class="flex-between">
<div class="left">
<p class="one">{{ item.label }}</p>
</div>
<div class="right">
<img v-if="siteForm1.domainSuffix == item.value"
src="@/assets/register/drop-selected.svg" alt="">
</div>
</div>
</template> -->
</CustomDropdown>
</GuipFormItem> </GuipFormItem>
</div> </div>
</div> </div>
@ -63,9 +100,9 @@
<img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;" <img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;"
alt=""><span>微信收款</span> alt=""><span>微信收款</span>
</div> </div>
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.weixin_pay" :options="options_weixin" <CustomDropdown slot="formDom" width="100%" v-model="siteForm1.weixin_pay"
@change="changeSelectWeixin" placeholder="请选择" :options_null="options_weixin_null" :options="options_weixin" @change="changeSelectWeixin" placeholder="请选择"
@changeNormal="changeNormalWeixin"> :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
<!-- 自定义触发按钮 --> <!-- 自定义触发按钮 -->
<template #trigger> <template #trigger>
<span v-if="selectedItemWeixin" <span v-if="selectedItemWeixin"
@ -109,9 +146,9 @@
</div> </div>
<!-- <GuipSelect slot="formDom" v-model="siteForm2.zhifubao_pay" prop="zhifubao_pay" <!-- <GuipSelect slot="formDom" v-model="siteForm2.zhifubao_pay" prop="zhifubao_pay"
:options="options_zhifubao" placeholder="未绑定支付宝收款" /> --> :options="options_zhifubao" placeholder="未绑定支付宝收款" /> -->
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.zhifubao_pay" :options="options_weixin" <CustomDropdown slot="formDom" width="100%" v-model="siteForm1.zhifubao_pay"
@change="changeSelectWeixin" placeholder="请选择" :options_null="options_weixin_null" :options="options_weixin" @change="changeSelectWeixin" placeholder="请选择"
@changeNormal="changeNormalWeixin"> :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
<!-- 自定义触发按钮 --> <!-- 自定义触发按钮 -->
<template #trigger> <template #trigger>
<span v-if="selectedItemWeixin" <span v-if="selectedItemWeixin"
@ -200,8 +237,20 @@ export default {
company_name: '', company_name: '',
phone_num: '', phone_num: '',
}, },
domainOptions: [
{
value: '.chachongz.com',
label: '.chachongz.com'
},
{
value: '.turnitin.org.cn',
label: '.turnitin.org.cn'
},
{
value: '.jishu.chachongz.com',
label: '.jishu.chachongz.com'
},
],
siteForm: { siteForm: {
company_name: '', company_name: '',
company_address: '', company_address: '',
@ -215,6 +264,7 @@ export default {
// }, // },
siteForm1: { siteForm1: {
domain_set: '', domain_set: '',
domainSuffix:'.chachongz.com',
domain_source: '平台免费域名', domain_source: '平台免费域名',
}, },
siteForm2: { siteForm2: {
@ -244,9 +294,9 @@ export default {
computed: { computed: {
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
}, },
created(){ created() {
store.commit('SET_CUSTOMIZE', true); store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU','siteSettingData'); store.commit('SET_SLIDER_MENU', 'siteSettingData');
}, },
mounted() { mounted() {
store.commit('SET_PAGETITLE', '基本设置'); store.commit('SET_PAGETITLE', '基本设置');
@ -254,14 +304,22 @@ export default {
this.getSiteInfo(); this.getSiteInfo();
}, },
methods: { methods: {
// 操作下拉框
toggleDrop(e){
this.$refs.dropDomain.toggleDropdown(e)
},
changeSelectIp(item) {
//内容真实绑定在
this.selectedItem1 = { ...item };
},
// 获取站点信息 // 获取站点信息
getSiteInfo() { getSiteInfo() {
const that = this const that = this
that.siteInfo = [] that.siteInfo = []
this.$http('POST', '/agentnew/ajax_get_site_info', { this.$http('POST', '/agentnew/ajax_get_site_info', {
uid: this.$route.query.uid, uid: this.$route.query.uid,
},{ }, {
headers:{ headers: {
'Auth': this.token 'Auth': this.token
} }
}).then(response => { }).then(response => {
@ -278,8 +336,8 @@ export default {
short_name: this.siteInfo.short_name, short_name: this.siteInfo.short_name,
company_name: this.siteInfo.company_name, company_name: this.siteInfo.company_name,
company_phone: this.siteInfo.phone_num, company_phone: this.siteInfo.phone_num,
},{ }, {
headers:{ headers: {
'Auth': this.token 'Auth': this.token
} }
}).then(response => { }).then(response => {
@ -336,26 +394,70 @@ export default {
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.pageheader { .pageheader {
display: flex; display: flex;
justify-content: space-between; /* 关键属性 */ justify-content: space-between;
align-items: center; /* 关键属性 */
align-items: center;
margin: 16px 0px 16px 0px; margin: 16px 0px 16px 0px;
} }
.pagetitle { .pagetitle {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: normal; line-height: normal;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #1E2226; color: #1E2226;
margin-top:8px; margin-top: 8px;
} }
.siteMessage{
.siteMessage {
border-radius: 4px; border-radius: 4px;
transition: all .5s; transition: all .5s;
border: 1px solid transparent; border: 1px solid transparent;
} }
.combo-formItem {
::v-deep {
.form-item-bottom {
position: relative;
}
.select-trigger {
background: #F6F7FA;
border-color: transparent;
}
.is-open .select-trigger {
border-color: #006AFF;
}
.el-input__inner {
border-radius: 2px 0 0 2px;
}
}
.self-drop-wrap {
position: absolute;
z-index: 1;
width: 100%;
}
.appendDrop {
height: 38px;
align-items: center;
border-radius: 0 2px 2px 0;
border: 1px solid #DFE2E6;
border-left-color: transparent;
justify-content: center;
box-sizing: border-box;
padding: 0 30px 0 12px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&:hover {
border: 1px solid #006AFF;
}
}
}
.addStore { .addStore {
margin-top: 12px; margin-top: 12px;
// border-radius: 4px; // border-radius: 4px;
@ -372,12 +474,14 @@ export default {
} }
.site-setting-wrap{ .site-setting-wrap {
width: 100%; width: 100%;
} }
#siteMessage2{
#siteMessage2 {
margin: 12px 0; margin: 12px 0;
} }
.domain-wrap { .domain-wrap {
.domain-item { .domain-item {
margin-bottom: 10px; margin-bottom: 10px;

209
src/views/elementGroups.vue
View File

@ -11,8 +11,8 @@
</div> </div>
<div class="ele-item"> <div class="ele-item">
<label for="">下拉框：</label> <label for="">下拉框：</label>
<GuipSelect width="600px" v-model="form.card" clearable label="卡片" :default-value="form.card" prop="card" <GuipSelect width="600px" v-model="form.card" clearable label="卡片" :default-value="form.card"
:options="options" valueKey="id1" labelKey="id2" /> prop="card" :options="options" valueKey="id1" labelKey="id2" />
</div> </div>
<div> <div>
<h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3> <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
@ -120,7 +120,7 @@
<div class="ele-item"> <div class="ele-item">
<label for="">文本域：固定行数</label> <label for="">文本域：固定行数</label>
<GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="4" /> <GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" />
</div> </div>
<div class="ele-item"> <div class="ele-item">
<label for="">文本域：自适应高度</label> <label for="">文本域：自适应高度</label>
@ -128,9 +128,8 @@
</div> </div>
<div class="ele-item"> <div class="ele-item">
<label for="">文本域：自定义label、描述</label> <label for="">文本域：自定义label、描述</label>
<GuipTextarea label="详细介绍" column="column" prop="doctor_detail" <GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="90px"
width="400px" height="90px" placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit />
show-word-limit />
</div> </div>
<div class="ele-item"> <div class="ele-item">
@ -283,8 +282,8 @@
<!-- <b slot="formLeft">自定义左侧</b> --> <!-- <b slot="formLeft">自定义左侧</b> -->
<span class="desc" slot="formRight"><a href="https://www.baidu.com/">跳转一下</a> 自定义右侧</span> <span class="desc" slot="formRight"><a href="https://www.baidu.com/">跳转一下</a> 自定义右侧</span>
<!-- 自定义下方内容 --> <!-- 自定义下方内容 -->
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.age" <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.age" prop="age"
prop="age" placeholder="请输入" /> placeholder="请输入" />
</GuipFormItem> </GuipFormItem>
</div> </div>
@ -293,6 +292,105 @@
<GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange"> <GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch> </GuipSwitch>
</div> </div>
<div class="flex ele-item">
<label for="">input、drop组合使用(默认使用)</label>
<GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
<div slot="formDom" class="self-drop-wrap flex">
<GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
</GuipInput>
<!-- 只用作选中内容展示 -->
<div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">
{{ currentDomainItem.name }}</div>
</div>
<!--触发 真实下拉操作 -->
<!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
<CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="form.domainSuffix1"
:options="domainOptions" @change="changeSelectIp"
placeholder="请选择">
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>添加新域名</b>
<p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
<p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
</div>
<div class="right">
<GuipButton size="form">前往绑定</GuipButton>
</div>
</div>
</template>
</CustomDropdown>
</GuipFormItem>
</div>
<div class="flex ele-item">
<label for="">input、drop组合使用(自定义下拉选择项)</label>
<GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
<div slot="formDom" class="self-drop-wrap flex">
<GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
</GuipInput>
<!-- 只用作选中内容展示 -->
<div @click="toggleDrop1" class="point flex appendDrop" style="width: 40%;">
{{ currentDomainItem.name }}
</div>
</div>
<!--触发 真实下拉操作 -->
<!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
<CustomDropdown slot="formDom" ref="dropDomain1" width="100%" v-model="form.domainSuffix"
:options="domainOptions" @change="changeSelectIp" valueKey="id" placeholder="请选择">
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>添加新域名</b>
<p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
<p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
</div>
<div class="right">
<GuipButton size="form">前往绑定</GuipButton>
</div>
</div>
</template>
<!-- 自定义下拉选项 选中条件-->
<!-- 不添加这个 默认普通选中格式 单独取值 display-key
自定义渲染项 渲染的内容自定义 ，display-key 属性不再生效-->
<template #item="{ item }">
<div class="flex-between">
<div class="left">
<p class="one">{{ item.label }}</p>
</div>
<div class="right">
<img v-if="form.domainSuffix == item.id"
src="@/assets/register/drop-selected.svg" alt="">
</div>
</div>
</template>
</CustomDropdown>
</GuipFormItem>
</div>
<div class="flex ele-item">
<label for="">单独实现自定义内容下拉选择</label>
<CustomDropdown width="500px" v-model="form.domainSuffix" :options="domainOptions"
@change="changeSelectIp" valueKey="id" placeholder="请选择">
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>添加新域名</b>
<p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
<p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
</div>
<div class="right">
<GuipButton size="form">前往绑定</GuipButton>
</div>
</div>
</template>
<template #item="{ item }">
<div class="flex-between">
<p>测试一下自定义内容{{ item. id}} + {{ item.label }}</p>
<p>易烊千玺/田栩宁</p>
</div>
</template>
</CustomDropdown>
</div>
<el-button type="primary" @click="submitForm">Submit</el-button> <el-button type="primary" @click="submitForm">Submit</el-button>
</el-form> </el-form>
@ -327,6 +425,7 @@
<GuipButton type="primary" @click="openDialog">打开弹框</GuipButton> <GuipButton type="primary" @click="openDialog">打开弹框</GuipButton>
<GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton> <GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
</div> </div>
<div class="flex ele-item"> <div class="flex ele-item">
<label for="">提示信息</label> <label for="">提示信息</label>
<GuipToolTip content="这是一个提示"> <GuipToolTip content="这是一个提示">
@ -364,7 +463,7 @@
<script> <script>
import { rules } from "../assets/vabForm"; import { rules } from "../assets/vabForm";
// @ is an alias to /src import CustomDropdown from '@/components/CustomDropdown.vue';
import GuipSwitch from '@/components/GuipSwitch.vue'; import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipDialog from '@/components/GuipDialog.vue'; import GuipDialog from '@/components/GuipDialog.vue';
import GuipRadio from '@/components/GuipRadio.vue'; import GuipRadio from '@/components/GuipRadio.vue';
@ -394,10 +493,31 @@ export default {
GuipToolTip, GuipToolTip,
HoverButton, HoverButton,
SvgIcon, SvgIcon,
GuipFormItem GuipFormItem,
CustomDropdown
}, },
data() { data() {
return { return {
domainOptions: [
{
value: '.chachongz.com',
label: '111.chachongz.com',
id: '11',
name: '测试一下自定义名称111'
},
{
value: '.turnitin.org.cn',
label: '222.turnitin.org.cn',
id: '22',
name: '测试一下自定义名称222'
},
{
value: '.jishu.chachongz.com',
label: '333.jishu.chachongz.com',
id: '33',
name: '测试一下自定义名称333'
},
],
tableData3: [{ tableData3: [{
id: '12987122', id: '12987122',
name: '王小虎', name: '王小虎',
@ -443,7 +563,10 @@ export default {
form: { form: {
username: '', username: '',
language: '', language: '',
card:'1', domain_set: '',
domainSuffix: '11',
domainSuffix1: '.chachongz.com',
card: '1',
input1: '', input1: '',
input2: '', input2: '',
input3: '', input3: '',
@ -706,10 +829,30 @@ export default {
// this.timer = null; // this.timer = null;
}, },
computed: {
currentDomainItem() {
return this.findItemById('id', 'domainSuffix');
}
},
methods: { methods: {
findItemById(valueKey, key) {
// 自动查找选中项
return this.domainOptions.find(item => item[valueKey] === this.form[key]);
},
toggleDrop1(e) {
this.$refs.dropDomain1.toggleDropdown(e)
},
toggleDrop(e) {
this.$refs.dropDomain.toggleDropdown(e)
},
changeInputtest(e) { changeInputtest(e) {
console.log(e, '---000changeInputtest'); console.log(e, '---000changeInputtest');
}, },
changeSelectIp(item) {
// 选中项
// this.selectedItem1 = { ...item };
console.log(item, this.form.domainSuffix,this.form.domainSuffix1, '选中的项-值-');
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) { arraySpanMethod({ row, column, rowIndex, columnIndex }) {
console.log(row, column); console.log(row, column);
if (rowIndex % 2 === 0) { if (rowIndex % 2 === 0) {
@ -974,7 +1117,51 @@ export default {
} }
} }
} }
// 组合框样式 start
// input drop组合使用
.combo-formItem {
::v-deep {
.form-item-bottom {
position: relative;
}
.select-trigger {
background: #F6F7FA;
border-color: transparent;
}
.is-open .select-trigger {
border-color: #006AFF;
}
.el-input__inner {
border-radius: 2px 0 0 2px;
}
}
.self-drop-wrap {
position: absolute;
z-index: 1;
width: 100%;
}
.appendDrop {
height: 38px;
align-items: center;
border-radius: 0 2px 2px 0;
border: 1px solid #DFE2E6;
border-left-color: transparent;
justify-content: center;
box-sizing: border-box;
padding: 0 30px 0 12px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&:hover {
border: 1px solid #006AFF;
}
}
}
// 组合框样式 end
.ScaleBox { .ScaleBox {
width: 1000px; width: 1000px;

Write Preview
Loading…
Cancel
Save