npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-modal-ponicy

v1.1.0

Published

this is vue test!

Downloads

5

Readme

vmodal

基于vue.js2.0+的弹窗组件

  1. 参数,是一个对象*
modalData:{
	show: false,   	//是否显示弹窗,必填参数,modalData的必填参数
	title: '是否删除?',     //弹窗标题,默认值是“是否删除?”
	body: '是否确定删除?删除不可回复!',	// 弹窗内容,默认值是 “是否确定删除?删除不可恢复”
	width: '420px',  //容器宽度  默认值是 “420px”
	showTitle: true,  //显示标题  默认值是 true
	titleAnchor: 'center',  //标题文字位置 默认值是center居中,另外一个参数是‘left’居左
	bottomClass:['confirm', 'cancle'], //按钮添加样式,必须同时存在,若某个按钮不需添加则为空, 样式需要添加 !important
	titleClass: 'active',  //标题添加样式,样式需要添加 !important
}
  1. 监听的回调方法 a. on-cancle ; 取消按钮的回调方法,参数是false b. on-confirm; 确认按钮回调方法,参数是false

  2. 因为自组件是不能改变父组件的数据状态,所以必须通过组件的回调方法,动态修改组件的是否显示状态

  3. 该组件提供了4个可自主置换的slot插槽,可自定义自己的样式和添加自定义的dom节点

	a. 标题区的插槽:<slot name="modal-header"> </slot>
	b. 内容区的插槽:<slot name="modal-body"></slot>
	c. 底部按钮区的插槽:<slot name="modal-fooder"></slot>
	d. 关闭图标的插槽:<slot name="modal-close"></slot>   //避免该组件关闭按钮和系统ui设计不一致,可替换
  1. 注意事项 a. 置换样式时,需要注意样式的专有缓存,scoped时当前组件特有的,需注意两者关系 b. 在通过script直接引入的组件,数据传递:modalData="modalData"需要写成 :modal-Data="modalData"

  2. 用法

Import  引入:
	npm install vue-modal-ponicy --save     //npm 安装该组件包
	import modal  from 'vue-modal-ponicy'   // 导入该组件
	Vue.use(modal );      //全局注册该组件,在入口文件中倒入注册
	
	//在组件中调用,vmodal是组件名
	<vmodal :modalData.sync="modalData" @on-cancle="cancleHandle" @on-confirm="confirmHandle" />
	
	export default{
	
		data(){
			return{
				modalData: false
			}
		}
		
	}

Script 引入:
	<body>
		<div id="app">
			<div @click.stop.prevent="show">显示</div>
			<vmodal :modal-Data="modalData" @on-cancle="cancleHandle" @on-confirm="confinrHandel"></vmodal>
		</div>
	</body>
	
	<script type="text/javascript" src="./js/vue.js"></script>    
	<script type="text/javascript" src="./js/vueModal.js"></script>   //直接引入会自动全局注册
	
	var vm = new Vue({
		el: '#app',
		data:{
			modalData: {
				show: false,
			
			}
		},
		methods: {
			show: function() {
				this.modalData.show = true;   //显示弹窗
			},
			cancleHandle: function (boolean) {
				this.modalData.show = boolean;  //隐藏弹窗
			},
			confinrHandel: function (boolean) {
				this.modalData.show = boolean;   //隐藏弹窗
			}
		}
	});
  1. 兼容IE9+,Firefox,chrome,360,QQ

License

MIT