├── config
├── prod.env.js
├── dev.env.js
└── index.js
├── src
├── assets
│ └── logo.png
├── App.vue
├── main.js
└── components
│ ├── HelloWorld.vue
│ └── vue_comment
│ ├── hua.vue
│ └── b_comment.vue
├── index.html
├── package.json
└── README.md
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 | NODE_ENV: '"production"'
4 | }
5 |
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/koibi2/vue_comment_components/HEAD/src/assets/logo.png
--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 |
5 | module.exports = merge(prodEnv, {
6 | NODE_ENV: '"development"'
7 | })
8 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | s
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
17 |
18 |
23 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue'
4 | import App from './App'
5 | //引入element
6 | import ElementUI from 'element-ui';
7 | import 'element-ui/lib/theme-chalk/index.css';
8 | Vue.use(ElementUI);
9 |
10 | Vue.config.productionTip = false
11 |
12 | /* eslint-disable no-new */
13 | new Vue({
14 | el: '#app',
15 | components: { App },
16 | template: ''
17 | })
18 |
--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
58 |
59 |
60 |
63 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-comment-koibi2",
3 | "version": "1.0.0",
4 | "description": "A Vue.js project",
5 | "author": "koibi2 ",
6 | "private": true,
7 | "scripts": {
8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
9 | "start": "npm run dev",
10 | "build": "node build/build.js"
11 | },
12 | "dependencies": {
13 | "element-ui": "^2.4.11",
14 | "vue": "^2.5.2"
15 | },
16 | "devDependencies": {
17 | "autoprefixer": "^7.1.2",
18 | "babel-core": "^6.22.1",
19 | "babel-helper-vue-jsx-merge-props": "^2.0.3",
20 | "babel-loader": "^7.1.1",
21 | "babel-plugin-syntax-jsx": "^6.18.0",
22 | "babel-plugin-transform-runtime": "^6.22.0",
23 | "babel-plugin-transform-vue-jsx": "^3.5.0",
24 | "babel-preset-env": "^1.3.2",
25 | "babel-preset-stage-2": "^6.22.0",
26 | "chalk": "^2.0.1",
27 | "copy-webpack-plugin": "^4.0.1",
28 | "css-loader": "^0.28.0",
29 | "extract-text-webpack-plugin": "^3.0.0",
30 | "file-loader": "^1.1.4",
31 | "friendly-errors-webpack-plugin": "^1.6.1",
32 | "html-webpack-plugin": "^2.30.1",
33 | "node-notifier": "^5.1.2",
34 | "optimize-css-assets-webpack-plugin": "^3.2.0",
35 | "ora": "^1.2.0",
36 | "portfinder": "^1.0.13",
37 | "postcss-import": "^11.0.0",
38 | "postcss-loader": "^2.0.8",
39 | "postcss-url": "^7.2.1",
40 | "rimraf": "^2.6.0",
41 | "sass-loader": "^7.1.0",
42 | "semver": "^5.3.0",
43 | "shelljs": "^0.7.6",
44 | "uglifyjs-webpack-plugin": "^1.1.1",
45 | "url-loader": "^0.5.8",
46 | "vue-loader": "^13.3.0",
47 | "vue-style-loader": "^3.0.1",
48 | "vue-template-compiler": "^2.5.2",
49 | "webpack": "^3.6.0",
50 | "webpack-bundle-analyzer": "^2.9.0",
51 | "webpack-dev-server": "^2.9.1",
52 | "webpack-merge": "^4.1.0"
53 | },
54 | "engines": {
55 | "node": ">= 6.0.0",
56 | "npm": ">= 3.0.0"
57 | },
58 | "browserslist": [
59 | "> 1%",
60 | "last 2 versions",
61 | "not ie <= 8"
62 | ]
63 | }
64 |
--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | // Template version: 1.3.1
3 | // see http://vuejs-templates.github.io/webpack for documentation.
4 |
5 | const path = require('path')
6 |
7 | module.exports = {
8 | dev: {
9 |
10 | // Paths
11 | assetsSubDirectory: 'static',
12 | assetsPublicPath: '/',
13 | proxyTable: {},
14 |
15 | // Various Dev Server settings
16 | host: 'localhost', // can be overwritten by process.env.HOST
17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 | autoOpenBrowser: false,
19 | errorOverlay: true,
20 | notifyOnErrors: true,
21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 |
23 |
24 | /**
25 | * Source Maps
26 | */
27 |
28 | // https://webpack.js.org/configuration/devtool/#development
29 | devtool: 'cheap-module-eval-source-map',
30 |
31 | // If you have problems debugging vue-files in devtools,
32 | // set this to false - it *may* help
33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 | cacheBusting: true,
35 |
36 | cssSourceMap: true
37 | },
38 |
39 | build: {
40 | // Template for index.html
41 | index: path.resolve(__dirname, '../dist/index.html'),
42 |
43 | // Paths
44 | assetsRoot: path.resolve(__dirname, '../dist'),
45 | assetsSubDirectory: 'static',
46 | assetsPublicPath: '/',
47 |
48 | /**
49 | * Source Maps
50 | */
51 |
52 | productionSourceMap: true,
53 | // https://webpack.js.org/configuration/devtool/#production
54 | devtool: '#source-map',
55 |
56 | // Gzip off by default as many popular static hosts such as
57 | // Surge or Netlify already gzip all static assets for you.
58 | // Before setting to `true`, make sure to:
59 | // npm install --save-dev compression-webpack-plugin
60 | productionGzip: false,
61 | productionGzipExtensions: ['js', 'css'],
62 |
63 | // Run the build command with an extra argument to
64 | // View the bundle analyzer report after build finishes:
65 | // `npm run build --report`
66 | // Set to `true` or `false` to always turn it on or off
67 | bundleAnalyzerReport: process.env.npm_config_report
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 【注意】N年前写的，不会再维护。
2 | # 简单优雅的Vue评论组件
3 |
4 | ## 主要功能
5 |
6 | 1. 支持颜表情`emoji`（╮(￣▽￣)╭）
7 | 2. 支持滑动验证。
8 | 3. 评论为空不允许提交。
9 | 4. 封装了几个常用的方法。
10 |
11 | ## 在线浏览
12 |
13 | ### 1、用户已登录
14 |
15 | 
16 |
17 | ### 2、用户未登录
18 |
19 | 
20 |
21 | ## 引入方法
22 |
23 | ### 1、引入element-ui
24 |
25 | ``` bash
26 | 1、 cnpm i element-ui -D
27 | 2、 在main.js配置。（也可以按需加载）
28 | ```
29 |
30 | ### 2、
31 |
32 | ```vue
33 |
34 |
42 |
43 |
44 |
90 | ```
91 |
92 | ## 文档
93 |
94 | ### 1、属性
95 |
96 | | 属性名 | 类型 | 描述 |
97 | | ---------------- | ------- | ------------------------------------ |
98 | | `placeholder` | String | 默认的文字提示。 |
99 | | `if_not_logined` | String | 用户是否没有登录（未登录强制验证）。 |
100 | | `emoji_list` | Array | 颜文字列表。 |
101 | | `verify_once` | Boolean | 验证码是否只验证一次。 |
102 | | `comment_text` | String | 评论内容。 |
103 | | `comment_name` | String | 评论昵称。 |
104 |
105 | ### 2、方法
106 |
107 | | 方法名 | 描述 | 参数列表 |
108 | | ----------------------------------------------------- | ------------------------------------------------------------ | --------------------------------------------- |
109 | | submit_click | 点击`评论`按钮，触发的函数。 | - |
110 | | this.$refs.my_comment.err_submitFn("评论失败",1500) | 调用后，右下角显示错误提示。 | 1.提示内容，string格式。2.显示时间，int格式。 |
111 | | this.$refs.my_comment.success_submit("评论成功",1500) | 调用后，右下角显示提示。并清除已输入内容。根据设置重置验证码组件。 | 同上 |
112 |
113 | ## 下载demo
114 |
115 | ``` bash
116 | 1. git clone 或者 手动下载。
117 | 2. cnpm install
118 | 3. npm run dev
119 | 4. 打开：localhost:8080
120 | ```
121 |
122 | ## 说明
123 |
124 | 文档 => 优雅，界面 => 简单。
125 |
126 | 但代码有很多改进的空间。。。有机会再优化吧。
127 |
128 | 有问题欢迎Issues。
129 |
130 | 我封装的第一个组件，欢迎star鼓励(=・ω・=)
131 |
132 |
133 |
134 | p.s:有空的话，我会把（同样风格的）评论列表也封装成组件。
135 |
136 |
--------------------------------------------------------------------------------
/src/components/vue_comment/hua.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
{{confirmWords}}
5 |
7 |
评论
6 |