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 图标样式：

sunny 晴天

sunny-cloudy 多云

sunny-rain 晴转雨

cloudy 阴天

rain-snow 雨夹雪

light-rain 小雨

moderate-rain 中雨

heavy-rain 大雨

thunder-shower 雷阵雨

thunder-lightning 雷电

snow 雪

spray 雾

###洪水 tips 图标样式：

red

yellow

blue

orange

[Configuration Reference] See https://www.npmjs.com/~bowencon.

https://github.com/bowencon/