ada-lib - npm Package Compare versions

Comparing version

+11

src/packages/demo/index.js

		import Component from './index.vue'

		Component.install = function (Vue) {
		Vue.component(Component.name, Component)
		}

		if (typeof window !== 'undefined' && window.Vue) {
		window.Vue.use(Component)
		}

		export default Component

+68

src/packages/demo/index.vue

		<template>
		<div class="ada-demo">
		<div class="ada-demo-name">
		{{name}}
		<span class="ada-demo-gender">{{ gender ? '男' : '女'}}</span>
		</div>
		<!-- 用户描述 -->
		<slot name="desc">
		<!-- `<div>就是一个小喽啰</div>` -->
		<div>就是一个小喽啰</div>
		</slot>
		</div>
		</template>

		<script>
		export default {
		name: 'Demo',
		props: {
		// 姓名
		name: {
		type: String,
		required: true
		},
		// 性别
		gender: {
		// `1` / `0`
		type: Number,
		// 默认 `男：1`
		default: 1
		}
		},
		methods: {
		// @vuese
		// 提交表单
		// @arg ($event, form)
		submitForm ($event, form) {
		// 重置事件
		// @arg (form)
		this.$emit('submit', form)
		},
		// @vuese
		// 重置表单
		// @arg (form)
		resetForm (form) {
		// 重置事件
		// @arg { form }
		this.$emit('reset', {
		form
		})
		}
		}
		}
		</script>

		<style lang="stylus" scoped>
		.ada-demo {
		color: #333;
		line-height: 1.5;

		.ada-demo-name {
		font-size: 20px;
		}

		.ada-demo-gender {
		font-size: 14px;
		}
		}
		</style>

+29

src/packages/index.js

		import Demo from './demo'
		import Watermark from './watermark'

		const components = {
		Demo,
		Watermark
		}

		const install = function (Vue) {
		Object.keys(components).forEach(key => {
		const component = components[key]
		Vue.component(component.name, component)
		})
		}

		if (typeof window !== 'undefined' && window.Vue) {
		window.Vue.use(components)
		}

		export {
		install,
		Demo,
		Watermark
		}

		export default {
		install,
		...components
		}

+11

src/packages/watermark/index.js

		import Component from './index.vue'

		Component.install = function (Vue) {
		Vue.component(Component.name, Component)
		}

		if (typeof window !== 'undefined' && window.Vue) {
		window.Vue.use(Component)
		}

		export default Component

+82

src/packages/watermark/index.vue

		<template>
		<div class="ada-watermark">
		<div
		v-if="waterMark"
		class="watermark-main"
		:style="{backgroundImage: `url(${waterMark})`, zIndex: `${zIndex}`}"
		></div>
		<div class="watermark-content">
		<!-- 需要打水印的内容 -->
		<slot></slot>
		</div>
		</div>
		</template>

		<script>
		export default {
		name: 'Watermark',
		props: {
		// 水印文字
		text: {
		type: String,
		default: ''
		},
		// zIndex 值，控制遮挡页面内容
		zIndex: {
		type: Number,
		default: 0
		}
		},
		data () {
		return {
		waterMark: ''
		}
		},
		methods: {
		createImageUrl (options) {
		let canvas = document.createElement('canvas')

		canvas.width = 180
		canvas.height = 100

		let ctx = canvas.getContext('2d')

		ctx.font = '14px serif'
		ctx.textAlign = 'center'
		ctx.fillStyle = '#666'

		ctx.rotate(30 * Math.PI / 180)
		ctx.fillText(options.text, 60, 20)

		return canvas.toDataURL('image/png')
		}
		},
		mounted () {
		this.waterMark = this.createImageUrl({
		text: this.text
		})
		}
		}
		</script>

		<style lang="stylus" scoped>
		.ada-watermark {
		position: relative;

		.watermark-main {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.5;
		background-repeat: repeat;
		}

		.watermark-content {
		position: relative;
		z-index: 1;
		}
		}
		</style>

+3

-2

package.json

Improved metrics