Ant Design Vue教程
Ant Design Vue Cascader 省市区联动样式大小和自定义图标
Ant Design Vue Cascader 省市区联动样式大小和自定义图标，其实Ant Design所有组件自定义大小都是一样的，而自定义图标都差不多。
Cascader组件大小设置
新通过size属性设置，默认有large default small 大、中、小3中规格。
//大
<a-cascader size="large" style="width: 330px"></a-cascader>
//中 默认
<a-cascader size="default" style="width: 330px"></a-cascader>
//小
<a-cascader size="small" style="width: 330px"></a-cascader>自定义选择框后缀图标
有三种方式自定义图标:
一，种是直接把字符串作为后缀，当然是支持unicode图标的，比如♫
二，通过插槽把Ant Design图标插入
三，最后就是vnode对象
//第一种unicode图标，
<a-cascader suffixIcon="♫" placeholder="Please select"/>
如果你是通过传统的浏览器引入js的方式代码如下
<a-cascader suffix-icon="♫" placeholder="Please select"/>
//第三种通过插槽插入，如果
<a-cascader>
<a-icon type="smile" slot="suffixIcon" class="test" />
</a-cascader>完整代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Ant Design Vue Cascader 自定义图标例子</title>
<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/ant-design-vue/antd.min.js"></script>
<link href="https://www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
<!--需要引入vue-dash-event插件-->
<script src="https://www.itxst.com/package/ant-design-vue/vue-dash-event.js"></script>
<!--国际化-->
<script src="https://www.itxst.com/package/ant-design-vue/antd-with-locales.min.js"></script>
<style>
body {
padding-top: 10px
}
.ant-pagination-item-link.red {
color: red;
padding-left: 6px;
padding-right: 6px;
}
</style>
</head>
<body>
<div id="app">
<a-locale-provider :locale="locales.zh_CN">
<a-cascader :options="options" @change="onChange" :load-data="loadData" placeholder="请选择城市" style="width: 330px">
<!--自定义图标**************-->
<a-icon type="home" slot="suffixIcon" />
</a-cascader>
</a-locale-provider>
</div>
<script>
//本地化
const { LocaleProvider, locales } = window.antd;
//vue-dash-event插件
Vue.use(window['vue-dash-event']);
var app = new Vue({
el: '#app',
data() {
return {
options: [
{
value: 'zhejiang',
label: '浙江省',
isLeaf: false,
},
{
value: 'jiangsu',
label: '江西省',
isLeaf: false,
},
],
};
},
methods: {
onChange(value) {
console.log(value);
},
loadData(selectedOptions) {
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
//这个是模拟的ajax请求，你可以把这部分代码改成真正的ajax请求
setTimeout(() => {
targetOption.loading = false;
targetOption.children = [
{
label: `${targetOption.label} 服务器端加载1`,
value: 'dynamic1',
},
{
label: `${targetOption.label} 服务器端加载2`,
value: 'dynamic2',
},
];
this.options = [...this.options];
}, 1000);
},
},
});
</script>
</body>
</html>