xt-element-ui 2.2.2 → 2.2.4

package/docs/components/utils/theme.md

@@ -1,183 +1,280 @@
-## 主题配置
-
-## 概述
-
-通过工具函数可以全局设置主题模式，支持两种主题：`white`（亮色主题）和 `dark`（暗色主题）。
-
-## 方法说明
-
-### setTheme(theme)
-
-设置全局主题。
-
-| 参数 | 类型 | 必填 | 说明 |
-|------|------|------|------|
-| `theme` | String | 是 | 主题类型：`white`、`dark` |
-
-```vue
-<template>
-  <div>
-    <XtButton @click="setWhiteTheme">亮色主题</XtButton>
-    <XtButton @click="setDarkTheme">暗色主题</XtButton>
-  </div>
-</template>
-
-<script>
-import { setTheme } from 'xt-element-ui'
-
-export default {
-  methods: {
-    setWhiteTheme() {
-      setTheme('white')
-    },
-    setDarkTheme() {
-      setTheme('dark')
-    }
-  }
-}
-</script>
-```
-
-### getTheme()
-
-获取当前主题配置。
-
-```vue
-<template>
-  <div>
-    <XtText>当前主题：{{ currentTheme }}</XtText>
-  </div>
-</template>
-
-<script>
-import { getTheme } from 'xt-element-ui'
-
-export default {
-  computed: {
-    currentTheme() {
-      return getTheme()
-    }
-  }
-}
-</script>
-```
-
-## 主题对照表
-
-| 主题 | 说明 |
-|------|------|
-| `white` | 亮色主题，适合日间使用（默认值） |
-| `dark` | 暗色主题，适合夜间使用 |
-
-## 使用示例
-
-### 在组件安装时配置
-
-```javascript
-import XtElementUI from 'xt-element-ui'
-
-Vue.use(XtElementUI, {
-  theme: 'dark'  // 全局设置暗色主题
-})
-```
-
-### 动态切换主题
-
-```vue
-<template>
-  <div>
-    <XtFlexBox content="center" style="gap: 16px; margin-bottom: 16px;">
-      <XtButton 
-        v-for="theme in themes" 
-        :key="theme"
-        :type="currentTheme === theme ? 'primary' : ''"
-        @click="changeTheme(theme)"
-      >
-        {{ themeLabels[theme] }}
-      </XtButton>
-    </XtFlexBox>
-    
-    <XtCard>
-      <XtCardItem title="当前主题">
-        <XtText type="primary" bold>{{ themeLabels[currentTheme] }}</XtText>
-      </XtCardItem>
-      <XtCardItem title="主题状态">
-        <XtText :type="currentTheme === 'dark' ? 'warning' : 'success'">
-          {{ currentTheme === 'dark' ? '暗色模式已开启' : '亮色模式已开启' }}
-        </XtText>
-      </XtCardItem>
-    </XtCard>
-  </div>
-</template>
-
-<script>
-import { setTheme, getTheme } from 'xt-element-ui'
-
-export default {
-  data() {
-    return {
-      themes: ['white', 'dark'],
-      themeLabels: {
-        white: '亮色',
-        dark: '暗色'
-      }
-    }
-  },
-  computed: {
-    currentTheme() {
-      return getTheme()
-    }
-  },
-  methods: {
-    changeTheme(theme) {
-      setTheme(theme)
-    }
-  }
-}
-</script>
-```
-
-### 监听主题变化
-
-```vue
-<template>
-  <div>
-    <XtText>主题变化次数：{{ changeCount }}</XtText>
-  </div>
-</template>
-
-<script>
-import { onConfigChange } from 'xt-element-ui'
-
-export default {
-  data() {
-    return {
-      changeCount: 0,
-      unsubscribe: null
-    }
-  },
-  mounted() {
-    // 监听主题变化
-    this.unsubscribe = onConfigChange((key, value) => {
-      if (key === 'theme') {
-        this.changeCount++
-        console.log('主题已切换为:', value)
-      }
-    })
-  },
-  beforeDestroy() {
-    // 取消监听
-    if (this.unsubscribe) {
-      this.unsubscribe()
-    }
-  }
-}
-</script>
-```
-
-## 注意事项
-
-1. 主题切换会影响所有使用组件库样式的元素
-2. 设置后会在 `html` 标签上添加/移除 `data-theme="dark"` 属性
-3. 需要配合对应的暗色主题 CSS 样式才能生效
-4. 建议在应用初始化时设置主题，可以结合用户偏好存储（如 localStorage）
+## 主题配置
+
+## 概述
+
+通过工具函数可以全局设置主题模式，支持两种主题：`white`（亮色主题）和 `dark`（暗色主题）。
+
+主题系统采用统一的 CSS 变量架构，主题切换时会**同时设置两套变量**：
+
+| 变量前缀 | 用途 |
+|----------|------|
+| `--el-*` | 覆盖 Element UI 组件样式 |
+| `--xt-*` | xt-element-ui 自定义组件样式 |
+
+两套变量保持同步，确保 Element UI 原生组件和 xt 组件在主题切换时表现一致。
+
+## 架构说明
+
+```
+┌─────────────────────────────────────────────┐
+│  utils/theme-vars.js                        │
+│  ┌─────────────────────────────────────┐    │
+│  │  applyThemeVars(element, config)   │    │  ← 唯一事实源
+│  │  - LIGHT_THEME_VARS / DARK_THEME_VARS│    │
+│  │  - BRAND_COLORS                     │    │
+│  └─────────────────────────────────────┘    │
+└─────────────────────────────────────────────┘
+          ▲                    ▲
+          │ 调用               │ 调用
+┌─────────┴──────┐    ┌───────┴────────────┐
+│ utils/index.js  │    │ theme/iframe-      │
+│ setTheme()      │    │ injector.js       │
+│ setPrimaryColor()│   │ iframe 主题同步   │
+└─────────────────┘    └────────────────────┘
+```
+
+## 方法说明
+
+### setTheme(theme)
+
+设置全局主题，同时更新 `--el-*` 和 `--xt-*` 两套 CSS 变量。
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `theme` | String | 是 | 主题类型：`white`、`dark` |
+
+```vue
+<template>
+  <div>
+    <XtButton @click="setWhiteTheme">亮色主题</XtButton>
+    <XtButton @click="setDarkTheme">暗色主题</XtButton>
+  </div>
+</template>
+
+<script>
+import { setTheme } from 'xt-element-ui'
+
+export default {
+  methods: {
+    setWhiteTheme() {
+      setTheme('white')
+    },
+    setDarkTheme() {
+      setTheme('dark')
+    }
+  }
+}
+</script>
+```
+
+**内部行为**：
+1. 调用 `applyThemeVars()` 设置 `--el-*` 主题变量（主色、背景、文字、边框等）
+2. 设置 `--xt-*` 组件主色变量
+3. 在 `<html>` 上设置 `data-theme` 属性
+4. 同步更新 ECharts 图表主题
+
+### getTheme()
+
+获取当前主题配置。
+
+```vue
+<template>
+  <div>
+    <XtText>当前主题：{{ currentTheme }}</XtText>
+  </div>
+</template>
+
+<script>
+import { getTheme } from 'xt-element-ui'
+
+export default {
+  computed: {
+    currentTheme() {
+      return getTheme()
+    }
+  }
+}
+</script>
+```
+
+### setPrimaryColor(color)
+
+设置全局主色调，同时更新 `--el-color-primary*` 和 `--xt-color-primary*` 变量。
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `color` | String | 是 | 十六进制颜色值，如 `#1890ff` |
+
+```vue
+<template>
+  <div>
+    <XtButton @click="changePrimary('#ff5722')">橙色主题</XtButton>
+    <XtButton @click="changePrimary('#4caf50')">绿色主题</XtButton>
+  </div>
+</template>
+
+<script>
+import { setPrimaryColor } from 'xt-element-ui'
+
+export default {
+  methods: {
+    changePrimary(color) {
+      setPrimaryColor(color)
+    }
+  }
+}
+</script>
+```
+
+**自动衍生变量**：设置主色后会自动生成以下变量：
+
+| 变量 | 说明 |
+|------|------|
+| `--el-color-primary` | 主色 |
+| `--el-color-primary-light-3` | 主色 +30% 亮度 |
+| `--el-color-primary-light-5` | 主色 +50% 亮度 |
+| `--el-color-primary-light-7` | 主色 +70% 亮度 |
+| `--el-color-primary-light-8` | 主色 +80% 亮度 |
+| `--el-color-primary-light-9` | 主色 +90% 亮度 |
+| `--el-color-primary-dark-2` | 主色 -20% 亮度 |
+| `--el-color-primary-rgb` | 主色 RGB 值 |
+
+## 主题对照表
+
+| 主题 | 说明 |
+|------|------|
+| `white` | 亮色主题，适合日间使用（默认值） |
+| `dark` | 暗色主题，适合夜间使用 |
+
+## 使用示例
+
+### 在组件安装时配置
+
+```javascript
+import XtElementUI from 'xt-element-ui'
+
+Vue.use(XtElementUI, {
+  theme: 'dark'  // 全局设置暗色主题
+})
+```
+
+### 动态切换主题
+
+```vue
+<template>
+  <div>
+    <XtFlexBox content="center" style="gap: 16px; margin-bottom: 16px;">
+      <XtButton 
+        v-for="theme in themes" 
+        :key="theme"
+        :type="currentTheme === theme ? 'primary' : ''"
+        @click="changeTheme(theme)"
+      >
+        {{ themeLabels[theme] }}
+      </XtButton>
+    </XtFlexBox>
+    
+    <XtCard>
+      <XtCardItem title="当前主题">
+        <XtText type="primary" bold>{{ themeLabels[currentTheme] }}</XtText>
+      </XtCardItem>
+      <XtCardItem title="主题状态">
+        <XtText :type="currentTheme === 'dark' ? 'warning' : 'success'">
+          {{ currentTheme === 'dark' ? '暗色模式已开启' : '亮色模式已开启' }}
+        </XtText>
+      </XtCardItem>
+    </XtCard>
+  </div>
+</template>
+
+<script>
+import { setTheme, getTheme } from 'xt-element-ui'
+
+export default {
+  data() {
+    return {
+      themes: ['white', 'dark'],
+      themeLabels: {
+        white: '亮色',
+        dark: '暗色'
+      }
+    }
+  },
+  computed: {
+    currentTheme() {
+      return getTheme()
+    }
+  },
+  methods: {
+    changeTheme(theme) {
+      setTheme(theme)
+    }
+  }
+}
+</script>
+```
+
+### 监听主题变化
+
+```vue
+<template>
+  <div>
+    <XtText>主题变化次数：{{ changeCount }}</XtText>
+  </div>
+</template>
+
+<script>
+import { onConfigChange } from 'xt-element-ui'
+
+export default {
+  data() {
+    return {
+      changeCount: 0,
+      unsubscribe: null
+    }
+  },
+  mounted() {
+    // 监听主题变化
+    this.unsubscribe = onConfigChange((key, value) => {
+      if (key === 'theme') {
+        this.changeCount++
+        console.log('主题已切换为:', value)
+      }
+    })
+  },
+  beforeDestroy() {
+    // 取消监听
+    if (this.unsubscribe) {
+      this.unsubscribe()
+    }
+  }
+}
+</script>
+```
+
+### 微前端架构（iframe 场景）
+
+主系统切换主题后，子系统 iframe 中的 Element UI 组件会自动同步换色。详细用法参见 [iframe 主题注入](#/base/theme)。
+
+```javascript
+// 主系统
+import { setTheme } from 'xt-element-ui'
+import { createThemeInjector } from 'xt-element-ui'
+
+// 1. 创建注入器
+const injector = createThemeInjector({ theme: 'white' })
+
+// 2. 注入现有 iframe
+injector.injectAll('iframe')
+
+// 3. 切换主题（自动同步到所有 iframe）
+setTheme('dark')
+```
+
+## 注意事项
+
+1. 主题切换会影响所有使用组件库样式的元素
+2. 设置后会在 `html` 标签上添加/移除 `data-theme="dark"` 属性
+3. `setTheme` 和 `setPrimaryColor` 会**同时设置** `--el-*` 和 `--xt-*` 两套变量
+4. 建议在应用初始化时设置主题，可以结合用户偏好存储（如 localStorage）
+5. 微前端架构下，主系统通过 `createThemeInjector` 可实现 iframe 自动同步

package/lib/index.common.1.js

@@ -1,23 +1,5 @@
 ((typeof self !== 'undefined' ? self : this)["webpackJsonpindex"] = (typeof self !== 'undefined' ? self : this)["webpackJsonpindex"] || []).push([[1,2],{
 
-/***/ "0e3e":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_RangeDate_vue_vue_type_style_index_0_id_32b85e82_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("16dd");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_RangeDate_vue_vue_type_style_index_0_id_32b85e82_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_RangeDate_vue_vue_type_style_index_0_id_32b85e82_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
-/***/ }),
-
-/***/ "16dd":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "1db3":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -25,13 +7,13 @@
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b8cd9b04-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/RangeDate.vue?vue&type=template&id=32b85e82&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1d9e3ae5-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/RangeDate.vue?vue&type=template&id=a698fa3e
 var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"range-picker"},[_c('Picker',{attrs:{"type":_vm.type,"size":"small","placeholder":_vm.startPlaceholder,"disabled":_vm.disabled,"disabled-date":_vm.disabledStart},on:{"change":_vm.handleChange},model:{value:(_vm.startVal),callback:function ($$v) {_vm.startVal=$$v},expression:"startVal"}}),_c('span',{staticClass:"split"},[_vm._v(_vm._s(_vm.separator))]),_c('Picker',{attrs:{"type":_vm.type,"size":"small","placeholder":_vm.endPlaceholder,"disabled":_vm.disabled,"disabled-date":_vm.disabledEnd},on:{"change":_vm.handleChange},model:{value:(_vm.endVal),callback:function ($$v) {_vm.endVal=$$v},expression:"endVal"}})],1)
 }
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/xt-date-picker/component/RangeDate.vue?vue&type=template&id=32b85e82&scoped=true
+// CONCATENATED MODULE: ./src/components/xt-date-picker/component/RangeDate.vue?vue&type=template&id=a698fa3e
 
 // EXTERNAL MODULE: ./src/components/xt-date-picker/component/Picker.vue + 4 modules
 var Picker = __webpack_require__("b0ea");
@@ -123,9 +105,6 @@ var Picker = __webpack_require__("b0ea");
   
 // CONCATENATED MODULE: ./src/components/xt-date-picker/component/RangeDate.vue?vue&type=script&lang=js
  /* harmony default export */ var component_RangeDatevue_type_script_lang_js = (RangeDatevue_type_script_lang_js); 
-// EXTERNAL MODULE: ./src/components/xt-date-picker/component/RangeDate.vue?vue&type=style&index=0&id=32b85e82&prod&scoped=true&lang=css
-var RangeDatevue_type_style_index_0_id_32b85e82_prod_scoped_true_lang_css = __webpack_require__("0e3e");
-
 // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 var componentNormalizer = __webpack_require__("2877");
 
@@ -135,7 +114,6 @@ var componentNormalizer = __webpack_require__("2877");
 
 
 
-
 /* normalize component */
 
 var component = Object(componentNormalizer["a" /* default */])(
@@ -144,7 +122,7 @@ var component = Object(componentNormalizer["a" /* default */])(
   staticRenderFns,
   false,
   null,
-  "32b85e82",
+  null,
   null
   
 )
@@ -160,7 +138,7 @@ var component = Object(componentNormalizer["a" /* default */])(
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b8cd9b04-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/Picker.vue?vue&type=template&id=4a866a03
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1d9e3ae5-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/Picker.vue?vue&type=template&id=4a866a03
 var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"date-picker"},[(_vm.type !== 'quarter')?_c('el-date-picker',_vm._g(_vm._b({attrs:{"type":_vm.pickerType,"value-format":_vm.valueFormat,"disabled":_vm.disabled,"placeholder":_vm.placeholder,"popper-append-to-body":"","popper-class":"base-date-popper"},model:{value:(_vm.innerValue),callback:function ($$v) {_vm.innerValue=$$v},expression:"innerValue"}},'el-date-picker',_vm.$attrs,false),_vm.$listeners)):_c('el-popover',{attrs:{"trigger":"manual","placement":"bottom-start","width":"240"},model:{value:(_vm.quarterPopVisible),callback:function ($$v) {_vm.quarterPopVisible=$$v},expression:"quarterPopVisible"}},[_c('div',{staticClass:"quarter-panel"},[_c('div',{staticClass:"quarter-header"},[_c('el-button',{attrs:{"icon":"el-icon-d-arrow-left"},on:{"click":function($event){_vm.year--}}}),_c('span',[_vm._v(_vm._s(_vm.year)+" 年")]),_c('el-button',{attrs:{"icon":"el-icon-d-arrow-right"},on:{"click":function($event){_vm.year++}}})],1),_c('div',{staticClass:"quarter-list"},_vm._l((4),function(q){return _c('div',{key:q,staticClass:"quarter-item",class:{ active: _vm.quarterNum === q },on:{"click":function($event){return _vm.selectQuarter(q)}}},[_vm._v(" Q"+_vm._s(q)+" ")])}),0)]),_c('el-input',{ref:"quarterInput",attrs:{"slot":"reference","size":"small","readonly":"","placeholder":_vm.placeholder,"disabled":_vm.disabled,"clearable":""},on:{"clear":_vm.handleClearQuarter},slot:"reference",model:{value:(_vm.quarterShowText),callback:function ($$v) {_vm.quarterShowText=$$v},expression:"quarterShowText"}},[_c('i',{staticClass:"el-icon-date",attrs:{"slot":"affix"},slot:"affix"})])],1)],1)
 }
 var staticRenderFns = []

package/lib/index.common.2.js

@@ -7,7 +7,7 @@
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b8cd9b04-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/Picker.vue?vue&type=template&id=4a866a03
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1d9e3ae5-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/Picker.vue?vue&type=template&id=4a866a03
 var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"date-picker"},[(_vm.type !== 'quarter')?_c('el-date-picker',_vm._g(_vm._b({attrs:{"type":_vm.pickerType,"value-format":_vm.valueFormat,"disabled":_vm.disabled,"placeholder":_vm.placeholder,"popper-append-to-body":"","popper-class":"base-date-popper"},model:{value:(_vm.innerValue),callback:function ($$v) {_vm.innerValue=$$v},expression:"innerValue"}},'el-date-picker',_vm.$attrs,false),_vm.$listeners)):_c('el-popover',{attrs:{"trigger":"manual","placement":"bottom-start","width":"240"},model:{value:(_vm.quarterPopVisible),callback:function ($$v) {_vm.quarterPopVisible=$$v},expression:"quarterPopVisible"}},[_c('div',{staticClass:"quarter-panel"},[_c('div',{staticClass:"quarter-header"},[_c('el-button',{attrs:{"icon":"el-icon-d-arrow-left"},on:{"click":function($event){_vm.year--}}}),_c('span',[_vm._v(_vm._s(_vm.year)+" 年")]),_c('el-button',{attrs:{"icon":"el-icon-d-arrow-right"},on:{"click":function($event){_vm.year++}}})],1),_c('div',{staticClass:"quarter-list"},_vm._l((4),function(q){return _c('div',{key:q,staticClass:"quarter-item",class:{ active: _vm.quarterNum === q },on:{"click":function($event){return _vm.selectQuarter(q)}}},[_vm._v(" Q"+_vm._s(q)+" ")])}),0)]),_c('el-input',{ref:"quarterInput",attrs:{"slot":"reference","size":"small","readonly":"","placeholder":_vm.placeholder,"disabled":_vm.disabled,"clearable":""},on:{"clear":_vm.handleClearQuarter},slot:"reference",model:{value:(_vm.quarterShowText),callback:function ($$v) {_vm.quarterShowText=$$v},expression:"quarterShowText"}},[_c('i',{staticClass:"el-icon-date",attrs:{"slot":"affix"},slot:"affix"})])],1)],1)
 }
 var staticRenderFns = []