search

x-extends / vxe-table

Vxe table 的表格组件
https://vxetable.cn
MIT License
7.61k stars 1.05k forks source link

【不能使用v-bind动态修改主题】 #2076

Open anbeicat opened 1 year ago

anbeicat commented 1 year ago

可复现的链接：

https://codesandbox.io/s/vxe-table-4-x-vue-3-0-wen-ti-yan-shi-forked-z59uhn

问题描述与截图：

image

期望的结果：

能否动态的修改主题样式

操作系统：

mac 13.0.1 (22A400)

浏览器版本：

114.0.5735.106（正式版本） (arm64)

vue 版本：

3.2.45

vxe-table 版本：

4.4.1

adoin commented 1 year ago

你知道啥叫预编译么。。。

anbeicat commented 1 year ago

所以要怎么动态的修改主题呢

你知道啥叫预编译么。。。

adoin commented 1 year ago

所以要怎么动态的修改主题呢

你知道啥叫预编译么。。。

参考我这个吧

:root {
  --vxe-success-color: #87d068;
  --vxe-success-l6-color: #9ad77f;
  --vxe-success-l10-color: #a6dc8f;
  --vxe-success-l20-color: #c5e8b6;
  --vxe-success-d2-color: #81ce60;
  --vxe-success-d3-color: #7ecc5c;
  --vxe-success-d10-color: #68c441;
  --vxe-success-d20-color: #53a032;
  --vxe-table-border-color: #e8eaec;
  --vxe-table-border-radius: 6px;
}

html[data-theme='light'] {
  --vxe-modal-header-background-color: #8eabf8;
  --vxe-modal-header-color: #fff;
  --vxe-table-header-font-color: #fff;
  --vxe-table-header-background-color: #8eabf8;
  --vxe-font-size: 14px;
  --vxe-font-color: #666;
  --vxe-row-selected-bg-color: #ffe6b0;
}

html[data-theme='dark'] {
  --vxe-modal-header-background-color: #27355d;
  --vxe-form-background-color: #212b4b;
  --vxe-table-body-background-color: #212b4b;
  --vxe-grid-maximize-background-color: #212b4b;
  --vxe-textarea-background-color: #212b4b;
  --vxe-table-row-current-background-color: #334579;
  --vxe-table-column-current-background-color: #334579;
  --vxe-table-column-hover-background-color: #334579;
  --vxe-table-row-hover-background-color: #405492;
  --vxe-table-row-hover-current-background-color: #4d63ad;
  --vxe-input-date-picker-hover-background-color: #4d63ad;
  --vxe-loading-background-color: #677dc780;
  --vxe-loading-color: #75bcea;
  --vxe-table-row-checkbox-checked-background-color: #405492;
  --vxe-table-row-radio-checked-background-color: #405492;
  --vxe-modal-body-background-color: #212b4b;
  --vxe-button-default-background-color: #212b4b;
  --vxe-pulldown-panel-background-color: #212b4b;
  --vxe-input-background-color: #212b4b;
  --vxe-select-panel-background-color: #212b4b;
  --vxe-radio-button-default-background-color: #212b4b;
  --vxe-toolbar-background-color: #212b4b;
  --vxe-pager-background-color: #212b4b;
  --vxe-pager-perfect-background-color: #212b4b;
  --vxe-table-tree-node-line-color: #bec1c5;
  --vxe-table-border-color: #e2ebf6;
  --vxe-textarea-count-color: #e2ebf6;
  --vxe-table-header-font-color: #fff;
  --vxe-table-header-background-color: #27355d;
  --vxe-select-option-hover-background-color: #27355d;
  --vxe-font-size: 14px;
  --vxe-font-color: #e2ebf6;
  --vxe-table-font-color: #e2ebf6;
  --vxe-font-l10-color: #f5f8fc;
  --vxe-font-l20-color: #fff;

  /*
  --vxe-font-l10-color:#{darken(#e2ebf6,10%)};
  --vxe-font-l20-color:#{darken(#e2ebf6,20%)};
  */
  --vxe-pager-font-color: #ffffffe6;
  --vxe-row-selected-bg-color: #d39a26;

  div.ant-picker-panel-container {
    background: var(--vxe-input-background-color);
  }

  .ant-picker-range-arrow::after {
    border-color: var(--vxe-input-background-color);
  }
}
anbeicat commented 1 year ago

所以要怎么动态的修改主题呢

你知道啥叫预编译么。。。

参考我这个吧

:root {
  --vxe-success-color: #87d068;
  --vxe-success-l6-color: #9ad77f;
  --vxe-success-l10-color: #a6dc8f;
  --vxe-success-l20-color: #c5e8b6;
  --vxe-success-d2-color: #81ce60;
  --vxe-success-d3-color: #7ecc5c;
  --vxe-success-d10-color: #68c441;
  --vxe-success-d20-color: #53a032;
  --vxe-table-border-color: #e8eaec;
  --vxe-table-border-radius: 6px;
}

html[data-theme='light'] {
  --vxe-modal-header-background-color: #8eabf8;
  --vxe-modal-header-color: #fff;
  --vxe-table-header-font-color: #fff;
  --vxe-table-header-background-color: #8eabf8;
  --vxe-font-size: 14px;
  --vxe-font-color: #666;
  --vxe-row-selected-bg-color: #ffe6b0;
}

html[data-theme='dark'] {
  --vxe-modal-header-background-color: #27355d;
  --vxe-form-background-color: #212b4b;
  --vxe-table-body-background-color: #212b4b;
  --vxe-grid-maximize-background-color: #212b4b;
  --vxe-textarea-background-color: #212b4b;
  --vxe-table-row-current-background-color: #334579;
  --vxe-table-column-current-background-color: #334579;
  --vxe-table-column-hover-background-color: #334579;
  --vxe-table-row-hover-background-color: #405492;
  --vxe-table-row-hover-current-background-color: #4d63ad;
  --vxe-input-date-picker-hover-background-color: #4d63ad;
  --vxe-loading-background-color: #677dc780;
  --vxe-loading-color: #75bcea;
  --vxe-table-row-checkbox-checked-background-color: #405492;
  --vxe-table-row-radio-checked-background-color: #405492;
  --vxe-modal-body-background-color: #212b4b;
  --vxe-button-default-background-color: #212b4b;
  --vxe-pulldown-panel-background-color: #212b4b;
  --vxe-input-background-color: #212b4b;
  --vxe-select-panel-background-color: #212b4b;
  --vxe-radio-button-default-background-color: #212b4b;
  --vxe-toolbar-background-color: #212b4b;
  --vxe-pager-background-color: #212b4b;
  --vxe-pager-perfect-background-color: #212b4b;
  --vxe-table-tree-node-line-color: #bec1c5;
  --vxe-table-border-color: #e2ebf6;
  --vxe-textarea-count-color: #e2ebf6;
  --vxe-table-header-font-color: #fff;
  --vxe-table-header-background-color: #27355d;
  --vxe-select-option-hover-background-color: #27355d;
  --vxe-font-size: 14px;
  --vxe-font-color: #e2ebf6;
  --vxe-table-font-color: #e2ebf6;
  --vxe-font-l10-color: #f5f8fc;
  --vxe-font-l20-color: #fff;

  /*
  --vxe-font-l10-color:#{darken(#e2ebf6,10%)};
  --vxe-font-l20-color:#{darken(#e2ebf6,20%)};
  */
  --vxe-pager-font-color: #ffffffe6;
  --vxe-row-selected-bg-color: #d39a26;

  div.ant-picker-panel-container {
    background: var(--vxe-input-background-color);
  }

  .ant-picker-range-arrow::after {
    border-color: var(--vxe-input-background-color);
  }
}

好的，谢谢

anbeicat commented 1 year ago

所以要怎么动态的修改主题呢

你知道啥叫预编译么。。。

参考我这个吧

:root {
  --vxe-success-color: #87d068;
  --vxe-success-l6-color: #9ad77f;
  --vxe-success-l10-color: #a6dc8f;
  --vxe-success-l20-color: #c5e8b6;
  --vxe-success-d2-color: #81ce60;
  --vxe-success-d3-color: #7ecc5c;
  --vxe-success-d10-color: #68c441;
  --vxe-success-d20-color: #53a032;
  --vxe-table-border-color: #e8eaec;
  --vxe-table-border-radius: 6px;
}

html[data-theme='light'] {
  --vxe-modal-header-background-color: #8eabf8;
  --vxe-modal-header-color: #fff;
  --vxe-table-header-font-color: #fff;
  --vxe-table-header-background-color: #8eabf8;
  --vxe-font-size: 14px;
  --vxe-font-color: #666;
  --vxe-row-selected-bg-color: #ffe6b0;
}

html[data-theme='dark'] {
  --vxe-modal-header-background-color: #27355d;
  --vxe-form-background-color: #212b4b;
  --vxe-table-body-background-color: #212b4b;
  --vxe-grid-maximize-background-color: #212b4b;
  --vxe-textarea-background-color: #212b4b;
  --vxe-table-row-current-background-color: #334579;
  --vxe-table-column-current-background-color: #334579;
  --vxe-table-column-hover-background-color: #334579;
  --vxe-table-row-hover-background-color: #405492;
  --vxe-table-row-hover-current-background-color: #4d63ad;
  --vxe-input-date-picker-hover-background-color: #4d63ad;
  --vxe-loading-background-color: #677dc780;
  --vxe-loading-color: #75bcea;
  --vxe-table-row-checkbox-checked-background-color: #405492;
  --vxe-table-row-radio-checked-background-color: #405492;
  --vxe-modal-body-background-color: #212b4b;
  --vxe-button-default-background-color: #212b4b;
  --vxe-pulldown-panel-background-color: #212b4b;
  --vxe-input-background-color: #212b4b;
  --vxe-select-panel-background-color: #212b4b;
  --vxe-radio-button-default-background-color: #212b4b;
  --vxe-toolbar-background-color: #212b4b;
  --vxe-pager-background-color: #212b4b;
  --vxe-pager-perfect-background-color: #212b4b;
  --vxe-table-tree-node-line-color: #bec1c5;
  --vxe-table-border-color: #e2ebf6;
  --vxe-textarea-count-color: #e2ebf6;
  --vxe-table-header-font-color: #fff;
  --vxe-table-header-background-color: #27355d;
  --vxe-select-option-hover-background-color: #27355d;
  --vxe-font-size: 14px;
  --vxe-font-color: #e2ebf6;
  --vxe-table-font-color: #e2ebf6;
  --vxe-font-l10-color: #f5f8fc;
  --vxe-font-l20-color: #fff;

  /*
  --vxe-font-l10-color:#{darken(#e2ebf6,10%)};
  --vxe-font-l20-color:#{darken(#e2ebf6,20%)};
  */
  --vxe-pager-font-color: #ffffffe6;
  --vxe-row-selected-bg-color: #d39a26;

  div.ant-picker-panel-container {
    background: var(--vxe-input-background-color);
  }

  .ant-picker-range-arrow::after {
    border-color: var(--vxe-input-background-color);
  }
}

好的，谢谢

感觉你这种方法还是不能动态的修改呢，比如我想动态的修改$vxe-font-color这个值，（https://adminwork.netlify.app/），我想在给这个网站重新设置了主题色之后，$vxe-font-color也可以动态改变，但现在不太行

adoin commented 1 year ago

这不很简单吗？  你相当于要在app层做动态，弹出颜色选择器之类的方式吧。用动态style就行了啊 比如 :style="dynamicVarSetting" const dynamicVarSetting = computed(()=>({    '--vxe-modal-header-background-color':colorRGB.value }))  

adoin @.***

 

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2023年6月12日(星期一) 下午4:40 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [x-extends/vxe-table] 【不能使用v-bind动态修改主题】 (Issue #2076)

所以要怎么动态的修改主题呢

你知道啥叫预编译么。。。

参考我这个吧 :root { --vxe-success-color: #87d068; --vxe-success-l6-color: #9ad77f; --vxe-success-l10-color: #a6dc8f; --vxe-success-l20-color: #c5e8b6; --vxe-success-d2-color: #81ce60; --vxe-success-d3-color: #7ecc5c; --vxe-success-d10-color: #68c441; --vxe-success-d20-color: #53a032; --vxe-table-border-color: #e8eaec; --vxe-table-border-radius: 6px; } html[data-theme='light'] { --vxe-modal-header-background-color: #8eabf8; --vxe-modal-header-color: #fff; --vxe-table-header-font-color: #fff; --vxe-table-header-background-color: #8eabf8; --vxe-font-size: 14px; --vxe-font-color: #666; --vxe-row-selected-bg-color: #ffe6b0; } html[data-theme='dark'] { --vxe-modal-header-background-color: #27355d; --vxe-form-background-color: #212b4b; --vxe-table-body-background-color: #212b4b; --vxe-grid-maximize-background-color: #212b4b; --vxe-textarea-background-color: #212b4b; --vxe-table-row-current-background-color: #334579; --vxe-table-column-current-background-color: #334579; --vxe-table-column-hover-background-color: #334579; --vxe-table-row-hover-background-color: #405492; --vxe-table-row-hover-current-background-color: #4d63ad; --vxe-input-date-picker-hover-background-color: #4d63ad; --vxe-loading-background-color: #677dc780; --vxe-loading-color: #75bcea; --vxe-table-row-checkbox-checked-background-color: #405492; --vxe-table-row-radio-checked-background-color: #405492; --vxe-modal-body-background-color: #212b4b; --vxe-button-default-background-color: #212b4b; --vxe-pulldown-panel-background-color: #212b4b; --vxe-input-background-color: #212b4b; --vxe-select-panel-background-color: #212b4b; --vxe-radio-button-default-background-color: #212b4b; --vxe-toolbar-background-color: #212b4b; --vxe-pager-background-color: #212b4b; --vxe-pager-perfect-background-color: #212b4b; --vxe-table-tree-node-line-color: #bec1c5; --vxe-table-border-color: #e2ebf6; --vxe-textarea-count-color: #e2ebf6; --vxe-table-header-font-color: #fff; --vxe-table-header-background-color: #27355d; --vxe-select-option-hover-background-color: #27355d; --vxe-font-size: 14px; --vxe-font-color: #e2ebf6; --vxe-table-font-color: #e2ebf6; --vxe-font-l10-color: #f5f8fc; --vxe-font-l20-color: #fff; / --vxe-font-l10-color:#{darken(#e2ebf6,10%)}; --vxe-font-l20-color:#{darken(#e2ebf6,20%)}; / --vxe-pager-font-color: #ffffffe6; --vxe-row-selected-bg-color: #d39a26; div.ant-picker-panel-container { background: var(--vxe-input-background-color); } .ant-picker-range-arrow::after { border-color: var(--vxe-input-background-color); } }
好的，谢谢

感觉你这种方法还是不能动态的修改呢，比如我想动态的修改$vxe-font-color这个值，（https://adminwork.netlify.app/），我想在给这个网站重新设置了主题色之后，$vxe-font-color也可以动态改变，但现在不太行

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

anbeicat commented 1 year ago

这不很简单吗？  你相当于要在app层做动态，弹出颜色选择器之类的方式吧。用动态style就行了啊 比如 :style="dynamicVarSetting" const dynamicVarSetting = computed(()=>({    '--vxe-modal-header-background-color':colorRGB.value }))   adoin @.   … ------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2023年6月12日(星期一) 下午4:40 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [x-extends/vxe-table] 【不能使用v-bind动态修改主题】 (Issue #2076) 所以要怎么动态的修改主题呢 你知道啥叫预编译么。。。 参考我这个吧 :root { --vxe-success-color: #87d068; --vxe-success-l6-color: #9ad77f; --vxe-success-l10-color: #a6dc8f; --vxe-success-l20-color: #c5e8b6; --vxe-success-d2-color: #81ce60; --vxe-success-d3-color: #7ecc5c; --vxe-success-d10-color: #68c441; --vxe-success-d20-color: #53a032; --vxe-table-border-color: #e8eaec; --vxe-table-border-radius: 6px; } html[data-theme='light'] { --vxe-modal-header-background-color: #8eabf8; --vxe-modal-header-color: #fff; --vxe-table-header-font-color: #fff; --vxe-table-header-background-color: #8eabf8; --vxe-font-size: 14px; --vxe-font-color: #666; --vxe-row-selected-bg-color: #ffe6b0; } html[data-theme='dark'] { --vxe-modal-header-background-color: #27355d; --vxe-form-background-color: #212b4b; --vxe-table-body-background-color: #212b4b; --vxe-grid-maximize-background-color: #212b4b; --vxe-textarea-background-color: #212b4b; --vxe-table-row-current-background-color: #334579; --vxe-table-column-current-background-color: #334579; --vxe-table-column-hover-background-color: #334579; --vxe-table-row-hover-background-color: #405492; --vxe-table-row-hover-current-background-color: #4d63ad; --vxe-input-date-picker-hover-background-color: #4d63ad; --vxe-loading-background-color: #677dc780; --vxe-loading-color: #75bcea; --vxe-table-row-checkbox-checked-background-color: #405492; --vxe-table-row-radio-checked-background-color: #405492; --vxe-modal-body-background-color: #212b4b; --vxe-button-default-background-color: #212b4b; --vxe-pulldown-panel-background-color: #212b4b; --vxe-input-background-color: #212b4b; --vxe-select-panel-background-color: #212b4b; --vxe-radio-button-default-background-color: #212b4b; --vxe-toolbar-background-color: #212b4b; --vxe-pager-background-color: #212b4b; --vxe-pager-perfect-background-color: #212b4b; --vxe-table-tree-node-line-color: #bec1c5; --vxe-table-border-color: #e2ebf6; --vxe-textarea-count-color: #e2ebf6; --vxe-table-header-font-color: #fff; --vxe-table-header-background-color: #27355d; --vxe-select-option-hover-background-color: #27355d; --vxe-font-size: 14px; --vxe-font-color: #e2ebf6; --vxe-table-font-color: #e2ebf6; --vxe-font-l10-color: #f5f8fc; --vxe-font-l20-color: #fff; / --vxe-font-l10-color:#{darken(#e2ebf6,10%)}; --vxe-font-l20-color:#{darken(#e2ebf6,20%)}; / --vxe-pager-font-color: #ffffffe6; --vxe-row-selected-bg-color: #d39a26; div.ant-picker-panel-container { background: var(--vxe-input-background-color); } .ant-picker-range-arrow::after { border-color: var(--vxe-input-background-color); } } 好的，谢谢 感觉你这种方法还是不能动态的修改呢，比如我想动态的修改$vxe-font-color这个值，（https://adminwork.netlify.app/），我想在给这个网站重新设置了主题色之后，$vxe-font-color也可以动态改变，但现在不太行 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.>

image

不太行，修改不了。而且我想做成全局的，这样其他地方引用vxetable样式也是最新的，不用单独每个页面去修改

adoin commented 1 year ago

这不很简单吗？  你相当于要在app层做动态，弹出颜色选择器之类的方式吧。用动态style就行了啊 比如 :style="dynamicVarSetting" const dynamicVarSetting = computed(()=>({    '--vxe-modal-header-background-color':colorRGB.value }))   adoin @.   … ------------------ 原始邮件 ------------------ 发件人: @.**>; 发送时间: 2023年6月12日(星期一) 下午4:40 收件人: @.**>; 抄送: @.**>; @.**>; 主题: Re: [x-extends/vxe-table] 【不能使用v-bind动态修改主题】 (Issue #2076) 所以要怎么动态的修改主题呢 你知道啥叫预编译么。。。 参考我这个吧 :root { --vxe-success-color: #87d068; --vxe-success-l6-color: #9ad77f; --vxe-success-l10-color: #a6dc8f; --vxe-success-l20-color: #c5e8b6; --vxe-success-d2-color: #81ce60; --vxe-success-d3-color: #7ecc5c; --vxe-success-d10-color: #68c441; --vxe-success-d20-color: #53a032; --vxe-table-border-color: #e8eaec; --vxe-table-border-radius: 6px; } html[data-theme='light'] { --vxe-modal-header-background-color: #8eabf8; --vxe-modal-header-color: #fff; --vxe-table-header-font-color: #fff; --vxe-table-header-background-color: #8eabf8; --vxe-font-size: 14px; --vxe-font-color: #666; --vxe-row-selected-bg-color: #ffe6b0; } html[data-theme='dark'] { --vxe-modal-header-background-color: #27355d; --vxe-form-background-color: #212b4b; --vxe-table-body-background-color: #212b4b; --vxe-grid-maximize-background-color: #212b4b; --vxe-textarea-background-color: #212b4b; --vxe-table-row-current-background-color: #334579; --vxe-table-column-current-background-color: #334579; --vxe-table-column-hover-background-color: #334579; --vxe-table-row-hover-background-color: #405492; --vxe-table-row-hover-current-background-color: #4d63ad; --vxe-input-date-picker-hover-background-color: #4d63ad; --vxe-loading-background-color: #677dc780; --vxe-loading-color: #75bcea; --vxe-table-row-checkbox-checked-background-color: #405492; --vxe-table-row-radio-checked-background-color: #405492; --vxe-modal-body-background-color: #212b4b; --vxe-button-default-background-color: #212b4b; --vxe-pulldown-panel-background-color: #212b4b; --vxe-input-background-color: #212b4b; --vxe-select-panel-background-color: #212b4b; --vxe-radio-button-default-background-color: #212b4b; --vxe-toolbar-background-color: #212b4b; --vxe-pager-background-color: #212b4b; --vxe-pager-perfect-background-color: #212b4b; --vxe-table-tree-node-line-color: #bec1c5; --vxe-table-border-color: #e2ebf6; --vxe-textarea-count-color: #e2ebf6; --vxe-table-header-font-color: #fff; --vxe-table-header-background-color: #27355d; --vxe-select-option-hover-background-color: #27355d; --vxe-font-size: 14px; --vxe-font-color: #e2ebf6; --vxe-table-font-color: #e2ebf6; --vxe-font-l10-color: #f5f8fc; --vxe-font-l20-color: #fff; / --vxe-font-l10-color:#{darken(#e2ebf6,10%)}; --vxe-font-l20-color:#{darken(#e2ebf6,20%)}; / --vxe-pager-font-color: #ffffffe6; --vxe-row-selected-bg-color: #d39a26; div.ant-picker-panel-container { background: var(--vxe-input-background-color); } .ant-picker-range-arrow::after { border-color: var(--vxe-input-background-color); } } 好的，谢谢 感觉你这种方法还是不能动态的修改呢，比如我想动态的修改$vxe-font-color这个值，（https://adminwork.netlify.app/），我想在给这个网站重新设置了主题色之后，$vxe-font-color也可以动态改变，但现在不太行 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.>

image 不太行，修改不了。而且我想做成全局的，这样其他地方引用vxetable样式也是最新的，不用单独每个页面去修改

你写的是个鸡儿啊？？？？ 不是让你放外层吗？ 全局就放App.vue啊

anbeicat commented 1 year ago
image

放了的，这样改样式也不会有变化

adoin commented 1 year ago

丢个demo

anbeicat commented 1 year ago

丢个demo

https://codesandbox.io/s/vxe-table-4-x-vue-3-0-wen-ti-yan-shi-forked-z59uhn?file=/src/App.vue:598-703

adoin commented 1 year ago

丢个demo

https://codesandbox.io/s/vxe-table-4-x-vue-3-0-wen-ti-yan-shi-forked-z59uhn?file=/src/App.vue:598-703

走你： https://codesandbox.io/s/vxe-table-4-x-vue-3-0-wen-ti-yan-shi-forked-cl9q5h?file=/src/main.js

anbeicat commented 1 year ago

丢个demo

https://codesandbox.io/s/vxe-table-4-x-vue-3-0-wen-ti-yan-shi-forked-z59uhn?file=/src/App.vue:598-703

走你： https://codesandbox.io/s/vxe-table-4-x-vue-3-0-wen-ti-yan-shi-forked-cl9q5h?file=/src/main.js

感谢，我刚刚发现我本地的版本是4.41,就不适用你这种方法，然后刚刚升级到4.4.2-beta.8就可以了，谢谢！