element全局样式 #5

Merged
houhaobing merged 1 commits from haobing into master 2024-07-08 14:54:13 +08:00
4 changed files with 54 additions and 10 deletions
Showing only changes of commit a93cd35f95 - Show all commits

View File

@ -5,6 +5,8 @@ import App from '../src/App.vue'
//基于element组件封装引入element组件库 //基于element组件封装引入element组件库
import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination, Dialog, Button } from 'element-ui'; import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination, Dialog, Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
import '../src/styles/element-variables.scss'//element 组件样式文件
Vue.use(Input); Vue.use(Input);
Vue.use(Select); Vue.use(Select);
Vue.use(OptionGroup); Vue.use(OptionGroup);

View File

@ -128,6 +128,8 @@ export default {
if (!Array.isArray(newVal)) { if (!Array.isArray(newVal)) {
throw new Error("agDatePicker date请传入数组"); throw new Error("agDatePicker date请传入数组");
} }
console.log(newVal,'newVal');
newVal.length > 0 && newVal.length > 0 &&
newVal.some( newVal.some(
(item) => item !== null && item !== undefined && item !== "" (item) => item !== null && item !== undefined && item !== ""
@ -165,6 +167,9 @@ export default {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.el-range-editor.is-active:hover{
border: #8a1818;
}
.el-input__icon.el-range__close-icon { .el-input__icon.el-range__close-icon {
position: absolute; position: absolute;
font-size: 12px; font-size: 12px;

View File

@ -1,20 +1,27 @@
<template> <template>
<div> <div>
<!-- <el-button type="text" @click="abb = true">点击打开 Dialog</el-button> --> <el-button type="success" @click="abb = true">点击打开 Dialog</el-button>
<agTabs ref="ref_Pedestal" v-model="value" size="mini" :options="options"> <ag-dialog :visible.sync="abb"> </ag-dialog>
<!-- <span slot="footer">房价大降分类数据</span> --> <ag-datePicker :value="values"> </ag-datePicker>
</agTabs> <ag-input :visible.sync="abb"> </ag-input>
<!-- <div class="div"><span>888</span></div> --> <ag-select :visible.sync="abb" :options="a_options" v-model="value">
</ag-select>
<div class="div"><span>888</span></div>
</div> </div>
</template> </template>
<script> <script>
import agTabs from "../packages/agDatePicker/src/index.vue"; import agDialog from "../packages/agDialog/src/index.vue";
import agDatePicker from "../packages/agDatePicker/src/index.vue";
import agInput from "../packages/agInput/src/index.vue";
import agSelect from "../packages/agSelect/src/index.vue";
export default { export default {
components: { agTabs }, components: { agDialog, agDatePicker, agInput, agSelect },
data() { data() {
return { return {
value: [], value: "",
values: [],
options: [ options: [
{ {
label: "热门城市", label: "热门城市",
@ -122,7 +129,7 @@ export default {
], ],
abb: false, abb: false,
innerVisible: false, innerVisible: false,
options: [ a_options: [
{ {
value: "选项1", value: "选项1",
label: "黄金糕", label: "黄金糕",
@ -167,5 +174,4 @@ body {
width: 50px; width: 50px;
} }
} }
</style> </style>

View File

@ -0,0 +1,31 @@
/**
* I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
**/
/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;
$--button-font-weight: 400;
// $--color-text-regular: #1f2d3d;
$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;
$--table-border: 1px solid #dfe6ec;
/* icon font path, required */
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
theme: $--color-primary;
}