Vue-weather-liquidfill NPM

vue-weather-liquidfill

npm安装 vue-weather-liquidfill 插件

npm install vue-weather-liquidfill --save

npm 导入

import weatherLiquidfill from 'vue-weather-liquidfill'

Vue.use(weatherLiquidfill)

在组件中使用

`<weatherLiquidfill :titles="warnTitle" :options="dataList"></weatherLiquidfill>`

#####dataList内每个类型可单独使用，并可以自定义类型个数, 最多5种类型weather, typhoon, heavy, high-temp, flood ####Examples

	data: ()=> {
		return {
			dataList: [
				{
					type: 'weather',
					name: '天气预报',
					value: 'sunny',  //天气图标详情见下方样式设置
					text: '晴天',
					tips: ''  //red, yellow, blue, orange
				},
				{
					type: 'typhoon',
					name: '台风预警',
					value: '',		//例：100m/s
					text: '无台风',	//台风名称
					tips: '' //red, yellow, blue, orange
				},
				{
					type: 'heavy', 	//暴雨类型
					name: '暴雨预警',
					value: 'heavy-rain', //图标类型与天气一样
					text: '大雨',
					tips: 'blue' //red, yellow, blue, orange
				},
				{
					type: 'high-temp',
					name: '高温预警',
					value: '27°C',
					text: '正常',
					tips: ''//red, yellow, blue, orange, 空green
				},
				{
					type: 'flood',
					name: '汛情水位',
					value: '2.7m', //当前值
					text: '4.9m', //警戒线
					tips: 'green' //red, yellow, blue, orange, green
				}
			]
			
	    }
	}

###天气 value 图标样式：