hzzly / vue-particle-line Goto Github PK

View Code? Open in Web Editor NEW

514.0 514.0 153.0 2 MB

🌈一个Vue+Cnavas酷炫背景粒子线条

Home Page: http://hzzly.github.io/vue-particle-line/

JavaScript 77.80% HTML 9.60% Vue 12.60%

canvas vue vue-router

vue-particle-line's Introduction

vue-particle-line

How to use

npm install vue-particle-line --save

Main.js file

import Vue from 'vue'
import vueParticleLine from 'vue-particle-line'
import 'vue-particle-line/dist/vue-particle-line.css'
Vue.use(vueParticleLine)

App.vue file - Simple example

<template>
  <div id="app">
    <vue-particle-line>
      <router-view />
    </vue-particle-line>
  </div>
</template>

Props

Prop	Type	Default	Description
lineWidth	Number	0.3	connect line width
dotsNumber	Number	100	dot number
dotsDistance	Number	100	far as points to connect
hoverEffect	Boolean	true	mouse hover events

License

MIT

vue-particle-line's People

Contributors

Stargazers

Watchers

Forkers

sharewen zuiwan tkaven mevam dongtutu codedart2018 caosenvip picnic-yu liij fanglinks jsyluo likenamehaojie wj1453 tt244213968 simple7 devenc orecic rebortboss yuamo maliqiang 707735896 qiaoxue luoqua bujidao dreamxwang ghngg erictop3 limdblur leetia316 diycp leonhu0710 xiaoliangsu anryzhang wzj913906565 moneysail dkl520 wkai666 won21kr avalian 435364745 fjzhuxu x-toby jeneachiang z-leila guviva zhaoguangwei j421037 qinghuoqinghuo zhangfeil mr921112 littesisiter hanzhenchaogit linecode 51964987 zmnwh renwanjun ks3dev zhangkg wintersnowy geshangjing guofeng007 jackhuclan zhaofangmei chenming1 jerry-goodboy wmh404860242 qingduyu 76782875 nahua105 cheney223 foreverelement liu-huitao jiepi-zj aloneloser czbcxy tinygg gywgithub jessica-lee100200 alanwell yinzhihui-site wanqihua chenyuan8059 seablue001 ilpp chenxiaoshou dzxtan tyhtao1990 fu-you imaginaryeyes songyongguang dynckathline csyorange biefeng yanjing0104 xinlongyang skyformat99 real-jacket exelatiao bbotte wu-xiaowei

vue-particle-line's Issues

效果图呢

你好，有效果图嘛

Demo 404 了.

http://hjingren.cn/curriculum-design/

IE下报错

浏览器环境：
IE Edge 10 9

报错信息：
SCRIPT1003: 缺少 ':'

怎么登录进去啊

你这东西不支持配置，什么都写死了

hi

vue3 dont support

在 <vue-particle-line>标签里面包含表单控件的话不能编辑

在标签里面包含表单控件的话不能编辑，比如输入框不能输入内容，好像这个背景图是蒙在最上面的一样

<template>
  <vue-particle-line>
    <!--  <div class="login-wrapper" :style="'background-image:url('+ Background +')'"> 图片背景，可以替换下面的粒子线条背景-->
    <div class="login-wrapper" style="background-color: #263238">
      <div class="form-box" style="opacity: 0.9">
        <div class="form-title">
          <img src="../assets/img/logo1532-white.png" alt="icon">
        </div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="0px" class="login-form">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入账号" prefix-icon="el-icon-user" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleLogin" />
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" size="small" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </vue-particle-line>

下载以后无法运行

背景不随着视图改变，而改变

在watch和methods您是如何权衡这两个方法之间的界限的呢。

在canvas的的静态运用，让人眼前一亮，是个十分好的canvas和vue结合的例子。
在项目中很少看到您使用watch，您是如何判断何时使用methods而不是watch.感谢。