精华内容
下载资源
问答
  • vue单文本组件

    2020-11-15 17:21:20
    什么是vue单文本组件 .vue文件,称为文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js vue单文本组件的组成部分 .vue文件由三部分组成:&...

    什么是vue单文本组件

    .vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js

    vue单文本组件的组成部分

    .vue文件由三部分组成:<template>、<style>、<script>

    <template>
       //组件模板
    </template>
    
     <style>
       //组件css样式
    </style>
    
    <script>
       exprot default{
       //组件选项
       }
    </script>
    

    在单文本组件中编写css样式规则的时候,可以给<style>标签添加一个scoped属性,该属性用于限定css样式只能用于当前组件的元素。

    vue单文本组件的使用

    浏览器本身并不认为.vue文件的,所以必须对.vue文件进行加载解析,此时需要vue-loader。而vue-loader是基于webpack的 ,所以要想用 vue-loader必须先安装webpack

    通过CLI使用单文本组件

    通过vue脚手架搭建的项目可以直接使用单文本组件。我们通过下面一个案例来了解一下单文本组件的具体使用过程:

    1. 首先我们在打开src/App.vue文件,这个文件就是一个单文本组件。我们将其修改为
    <template>
      <div>
        <p>
          <button @click="onclick('新闻')">新闻</button>
          <button @click="onclick('图书')">图书</button>
          <button @click="onclick('视频')">视频</button>
        </p>
        <p v-if="name != ''">你点击了:{{ name }}按钮</p>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          name: "",
        };
      },
      methods: {
        onclick(val) {
          this.name = val;
        },
      },
    };
    </script>
    

    这样一个单文本组件就使用成功了。当然单文本组件不一定需要通过脚手架来使用,也可以通过webpack(前端资源模板化加载器和打包工具)来使用。
    在这里插入图片描述

    展开全文
  • vue文本组件 vuetrix编辑器 (vue-trix-editor) A Vue wrapper around the Trix rich-text editor, with support for images and auto-save. 围绕Trix富文本编辑器的Vue包装器,支持图像和自动保存。 注意:...

    vue 富文本组件

    vuetrix编辑器 (vue-trix-editor)

    A Vue wrapper around the Trix rich-text editor, with support for images and auto-save.

    围绕Trix富文本编辑器的Vue包装器,支持图像和自动保存。

    注意:没有真正的二一绑定。 (Note: No true two-one binding.)

    While you can use v-model to bind the editor contents (the formatted HTML) to your own Vue instance or component,you won't get true two-way binding with this component. That means that if you update the value of your content outside of the editor, it will not be taken into account by the editor. This means you have to treat the editor as the source of truth, not whatever you bind it to. The reason for this is that Trix only reads in the initial content once on initialization, so to force two-way binding, we would have to make Trix re-evaluate and rebuild the entire document on every keystroke, which is not really worth it.

    尽管您可以使用v-model将编辑器内容(格式为HTML)绑定到您自己的Vue实例或组件,但是您将无法获得与此组件真正的双向绑定。 这意味着,如果您在编辑器外部更新内容的值,那么编辑器将不会考虑该值。 这意味着您必须将编辑器视为真理的源头,而不是绑定到真理的源头。 原因是Trix在初始化时只读取一次初始内容,因此要进行双向绑定,我们将不得不让Trix在每次击键时重新评估并重建整个文档,这确实不值得。

    安装 (Installation)

    npm install @dymantic/trix-vue

    使用范例 (Usage Example)

    // simple rich-text editor, the html output is bound to whatever my_html is
    // the editor will initailly be populated with the contents from my_html
    <trix-vue v-model="my_html"></trix-vue>
    
    // same as above, but will allow adding images
    <trix-vue v-model="my_html" image-upload-path="/url/to/upload/images"></trix-vue>
    
    // simple rich-text editor, with a "save" button. Will send editor contents as POST to save-path
    <trix-vue v-model="my_html" save-path="/url/to/save/contents"></trix-vue>
    
    // same as above, but will auto-save at given interval (in seconds) if changes have been made
    <trix-vue v-model="my_html" save-path="/url/to/save/contents" :save-interval="10"></trix-vue>
    
    // all together now, and allow up to 20MB images
    <trix-vue v-model="my_html"
              image-upload-path="/url/to/upload/images"
              max-image-file-size="20"
              save-path="/url/to/save/contents"
              :save-interval="10"
    ></trix-vue>

    道具 (Props)

    The following props can be used to define the components behaviour

    以下道具可用于定义组件行为

    Prop namerequireddefaultNotes
    initial-contentfalse""The content to populate the editor with initially (or use v-model)
    image-upload-pathfalse""Supplying a value here allows for image uploads
    max-image-file-sizefalse5Specify the maximum image filesize in MB
    save-pathfalse""Supplying a url will allow content to be saved
    save-intervalfalsenullTime in seconds to auto-save. Only saves if there are changes since last save
    道具名称 需要 默认 笔记
    初始内容 最初用于填充编辑器的内容(或使用v-model)
    图像上传路径 在此处提供值可上传图片
    最大图像文件大小 5 指定最大图像文件大小(MB)
    保存路径 提供网址将允许保存内容
    保存间隔 空值 自动保存的时间(以秒为单位)。 仅在自上次保存以来有更改的情况下保存

    大事记 (Events)

    The editor will fire the following events:

    编辑器将触发以下事件:

    Event namepayloadNotes
    image-rejected(file, message)Fired if a user's image cannot be attached, either due to network error or invalid file
    image-attachednullFired after an image has been successfully uploaded and inserted into document
    content-savednullFired after editor contents have been successfully saved (200-ish response from server)
    content-save-failednullFired an error occurs while saving content to provided endpoint
    活动名称 有效载荷 笔记
    图像被拒绝 (文件,消息) 如果由于网络错误或无效文件而无法附加用户图像,则触发
    图像附加 空值 成功上传图像并将其插入文档后触发
    内容保存 空值 成功保存编辑器内容后触发(来自服务器的200 ish响应)
    内容保存失败 空值 将内容保存到提供的端点时触发错误

    翻译自: https://vuejsexamples.com/a-rich-text-editor-as-a-vue-component-with-image-and-auto-save-support/

    vue 富文本组件

    展开全文
  • vue 文本显示组件 提示词 (vue-highlight-words) A simple port from react-highlight-words 一个来自react-highlight-words的简单端口 Vue component to highlight words within a larger body of text. Vue组件...

    vue 文本显示组件

    提示词 (vue-highlight-words)

    A simple port from react-highlight-words

    一个来自react-highlight-words的简单端口

    Vue component to highlight words within a larger body of text.

    Vue组件可突出显示较大文本中的单词。

    为什么? (Why?)

    It uses render to handle the highlighted text instead of using v-html or el.innerHtml.

    它使用render处理高亮显示的文本,而不是使用v-htmlel.innerHtml

    用法 (Usage)

    To use it, just provide it with an array of search terms and a body of text to highlight.

    要使用它,只需为其提供搜索词数组和要突出显示的正文即可。

    <template>
      <div id="app">
        // attrs on component are applied to the wrapper `<span>`
        <Highlighter class="my-highlight" :style="{ color: 'red' }"
          highlightClassName="highlight"
          :searchWords="keywords"
          :autoEscape="true"
          :textToHighlight="text"/>
      </div>
    </template>
    
    <script>
    import Highlighter from 'vue-highlight-words'
    
    export default {
      name: 'app',
      components: {
        Highlighter
      },
      data() {
        return {
          text: 'The dog is chasing the cat. Or perhaps they\'re just playing?',
          words: 'and or the'
        }
      },
      computed: {
        keywords() {
          return this.words.split(' ')
        }
      }
    }
    </script>

    And the Highlighter will mark all occurrences of search terms within the text:

    Highlighter将标记文本中所有出现的搜索词:

    screen shot 2015-12-19 at 8 23 43 am

    道具 (Props)

    PropertyTypeRequired?Description
    activeClassNameStringThe class name to be applied to an active match. Use along with activeIndex
    activeIndexStringSpecify the match index that should be actively highlighted. Use along with activeClassName
    activeStyleObjectThe inline style to be applied to an active match. Use along with activeIndex
    autoEscapeBooleanEscape characters in searchWords which are meaningful in regular expressions
    caseSensitiveBooleanSearch should be case sensitive; defaults to false
    findChunksFunctionUse a custom function to search for matching chunks. This makes it possible to use arbitrary logic when looking for matches. See the default findChunks function in highlight-words-core for signature. Have a look at the custom findChunks example on how to use it.
    highlightClassNameStringCSS class name applied to highlighted text
    highlightStyleObjectInline styles applied to highlighted text
    highlightTagNodeType of tag to wrap around highlighted matches; defaults to mark but can also be a React element (class or functional)
    sanitizeFunctionProcess each search word and text to highlight before comparing (eg remove accents); signature (text: string): string
    searchWordsArray Array of search words. The search terms are treated as RegExps unless autoEscape is set.
    textToHighlightStringText to highlight matches in
    unhighlightClassNameStringCSS class name applied to unhighlighted text
    unhighlightStyleObjectInline styles applied to unhighlighted text
    属性 类型 需要? 描述
    activeClassName 要应用于活动匹配的类名称。 与activeIndex一起使用
    activeIndex 指定应突出显示的匹配索引。 与activeClassName一起使用
    activeStyle 目的 应用于活动匹配的内联样式。 与activeIndex一起使用
    自动逃生 布尔型 在正则表达式中有意义的searchWords中的转义字符
    区分大小写 布尔型 搜索应区分大小写; 默认为false
    findChunks 功能 使用自定义函数搜索匹配的块。 这使得寻找匹配项时可以使用任意逻辑。 有关签名,请参见findChunks - findChunks -Core中的默认findChunks函数。 查看有关如何使用自定义findChunks示例的信息。
    HighlightClassName CSS类名称应用于突出显示的文本
    HighlightStyle 目的 内联样式应用于突出显示的文本
    HighlightTag 节点 环绕突出显示的匹配项的标签类型; 默认mark但也可以是React元素(类或函数)
    消毒 功能 在比较之前处理每个搜索词和文本以突出显示(例如,删除重音符号); 签名(text: string): string
    搜索词 数组 搜索词数组。 搜索词将被视为正则表达式,除非autoEscape设置。
    textToHighlight 突出显示匹配项的文字
    unhighlightClassName CSS类名称应用于未突出显示的文本
    unhighlightStyle 目的 内联样式应用于未突出显示的文本

    安装 (Installation)

    npm i --save vue-highlight-words

    项目设置 (Project setup)

    npm install

    编译和热重装以进行开发 (Compiles and hot-reloads for development)

    npm run serve

    编译并最小化生产 (Compiles and minifies for production)

    npm run build

    整理和修复文件 (Lints and fixes files)

    npm run lint

    翻译自: https://vuejsexamples.com/vue-component-to-highlight-words-within-a-larger-body-of-text/

    vue 文本显示组件

    展开全文
  • vue 文本显示组件 Vue高亮输入 (Vue Highlightable Input) Highlight and style specific words as you're typing. 键入时突出显示和设置特定单词的样式。 View demo 查看演示 Download Source 下载源 安装 ...

    vue 文本显示组件

    Vue高亮输入 (Vue Highlightable Input)

    Highlight and style specific words as you're typing.

    键入时突出显示和设置特定单词的样式。

    vue-highlightable-input

    安装 (Install)

    npm install vue-highlightable-input --save

    用法 (Usage)

    在您的模板中添加以下内容: (In your template add this:)

    <highlightable-input 
      highlight-style="background-color:yellow" 
      :highlight-enabled="highlightEnabled" 
      :highlight="highlight" 
      v-model="msg"
    />

    在您的组件中添加以下内容: (In your component add this:)

    import HighlightableInput from "vue-highlightable-input"
    export default {
      name: 'HelloWorld',
      components : {
        HighlightableInput
      },
      data() {
        return {
          msg: '',
          highlight: [
            {text:'chicken', style:"background-color:#f37373"},
            {text:'noodle', style:"background-color:#fca88f"},
            {text:'soup', style:"background-color:#bbe4cb"},
            {text:'so', style:"background-color:#fff05e"},
            "whatever",
            {start: 2, end: 5, style:"background-color:#f330ff"}
          ],
          highlightEnabled: true
        }
      },
    }

    道具 (Props)

    NameRequiredTypeDefaultDescriptionReactive
    highlightYesString or ArraynullThe string or list of words to highlight. This can be a single string value, a RegExp or you can do an array of strings or RegExp or array of Highlight Objects or array of Range Objects.Yes
    highlightEnabledNoBooleantrueIf true, will highlight the textYes
    highlightStyleNoStringbackground-color:yellowIf no style is provided for text, this will act as the global styling for the highlight.Yes
    highlightDelayNoNumber500Determines how long in milliseconds to wait before processing the highlights. Setting this to a low value is fine for small text but setting it higher may improve performance significantly for larger textYes
    caseSensitiveNoBooleanfalseIf true, will treat highlight strings with case sensitivity. Can be overrided per highlight object.Yes
    valueNoStringnullRaw text value.Yes
    fireOnNoStringkeydownThe dom event on which the highlight event should be fired. This can be any event that the div content editable can handle.No (only because the listener is being added in mounted)
    名称 需要 类型 默认 描述 React性
    突出 字符串或数组 空值 要突出显示的字符串或单词列表。 这可以是单个字符串值,RegExp,也可以是字符串数组或RegExp或Highlight Objects数组或Range Objects数组。
    highlightEnabled 没有 布尔型 真正 如果为true,则会突出显示文字
    HighlightStyle 没有 背景颜色:黄色 如果没有为文本提供样式,则它将用作突出显示的全局样式。
    HighlightDelay 没有 500 确定在处理突出显示之前要等待的毫秒数。 将此值设置为较小的值对于较小的文本来说很好,但是将其设置为较高的值可能会明显改善较大的文本的性能
    区分大小写 没有 布尔型 如果为true,将以区分大小写的方式对待突出显示的字符串。 可以被每个高亮对象覆盖。
    没有 空值 原始文字值。
    开火 没有 按键 应当触发亮点事件的dom事件。 这可以是可编辑div内容可以处理的任何事件。 否(仅因为已在安装中添加了侦听器)

    高亮对象 (Highlight Object)

    {
        text:'chicken', // Required
        style:"background-color:#f37373" // Optional
        caseSensitive: true // Optional defaults to False
    }

    范围对象 (Range Object)

    {
        start:1, // Required
        end: 9,  // Required
        style:"background-color:#f37373" // Optional
    }

    End must be greater than start. The range end is exlusive in other words ==> start, end)

    结束必须大于开始。 范围结束是排他性的,换句话说==>开始,结束)

    大事记 (Events)

    NameDescription
    @inputJust like a regular input html element you can use this to react to input events
    名称 描述
    @输入 就像常规的输入html元素一样,您可以使用它来响应输入事件

    Note, that you can also you v-model

    注意,您也可以v-model

    一些注意事项 (Some notes)

    • This is not meant to be used for large scale text highlight because of how inefficient div contentEditable is and also the fact the algorithm I'm using is stupidly inefficient (try entering like a lot of text for highlighting)

      这不适合用于大规模文本突出显示,因为div contentEditable效率很低,而且我使用的算法效率非常低(尝试输入很多文本来突出显示)

    • Good use cases for this are something like what wit.ai does (they probably have a more efficient algorithm though) for highlighting recognized entities on the fly.

      良好的用例类似于wit.ai所做的事情(尽管它们可能具有更有效的算法),以便即时突出显示已识别的实体。

    • Let me know what other use cases you might have!

      让我知道您可能还有其他用例!

    翻译自: https://vuejsexamples.com/a-vue-component-to-highlight-text-as-youre-typing/

    vue 文本显示组件

    展开全文
  • 主要为大家详细介绍了vue文本编辑器组件vue-quill-edit的使用教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue实现嵌入到组件中 维斯罗林 (vue-scrollin) vue-scrollin is a Vue component that scrolls through various characters on... vue-scrollin是Vue组件,可在显示正确的文本之前滚动浏览挂载的各种字符。 View ...
  • 1、npm install vue-quill-editor quill-image-drop-modulequill-image-extend-modulequill-image-resize-module 2、文档地址:https://bingkui.gitbooks.io/quill/content/documentation/api/selection.html ...
  • vue-auto-text |文字大小自适应组件 介绍 当给定宽度时,文字的大小自适应,以保证不溢出和换行 文件 安装 npm install vue-auto-text --save 使用 // 局部引入 import AutoText from 'vue-auto-text' export ...
  • Textra一个Vue.js附加组件,可滑动您的文本。 演示安装npm i -D vue-textra然后在项目中开始使用它:从“ vue”导入Vue导入Textra一个Vue.js插件可滑动文本。 演示安装npm i -D vue-textra然后在项目中开始使用它:...
  • Vue 文件组件的几种写法

    千次阅读 2020-02-29 12:40:12
    这是我们最常见的文件组件的写法,这里就不过多去赘述 // 模板部分 <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> </div> </template> // 逻辑...
  • 1:使用npm下载: //(注意 wangeditor 全部是小写字母) npm install wangeditor 2: 直接在项目模板中引用 import E from 'wangeditor' 3:HTML <template> <div id="wangeditor">.../di...
  • vue项目中经常会遇到需要编辑和展示一些比较复杂的新闻内容,这时候就会用到富文本编辑器,接下来咱们一起来看一下如何在vue中使用富文本组件vue-quill-editor 1、安装editor组件 在终端运行命令cnpm install ...
  • vue后台管理系统富文本组件tinymce 简介 富文本组件作为后台管理系统的最重要的基础组件之一,一定要选择坑比较少的富文本厂家。这里使用的是好看又坑少的tinymce。 主要依赖说明 (先安装,步骤略) { "element-...
  • vue文本编辑器组件

    2019-02-16 15:15:47
    1.引用quill &lt;script src="/lib/quill/quill.min.js"&gt;&lt;/script&gt; &lt;link href="...2.RichEditorDemo.vue &lt;template&gt; &lt;div cl
  • 利用文件组件和路由,实现访问根路径时显示为home页面,访问list时显示list页面 src文件夹中存储的是代码,main.js是vue的入口文件,App.vue是最外层文件,显示的是App.vue中的内容 router-view标签是显示...
  • vue后台管理系统富文本组件(二)kindeditor

    千次阅读 热门讨论 2019-08-23 17:37:40
    vue后台管理系统富文本组件(二)kindeditor 简介 富文本组件作为后台管理系统的最重要的基础组件之一,好多公司还是习惯使用kindeditor。虽然他的界面比较老,但是相当稳定bug少。 主要依赖说明 (先安装,步骤略)...
  • Vue组件组件传值和组件插槽 一、Vue组件: 1.组件 (Component) 是 Vue.js 最强大的功能之一,通过组件可以扩展 HTML 元素,封装可重用的代码; 2.组件是可复用的 Vue 实例,与 new Vue 接收相同的选项,例如 data...
  • 第一步、引用vue文本组件quillEditor所需的一些配置文件 import { quillEditor } from "vue-quill-editor"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill....
  • :ghost: Vue.js 组件在任何类型的文本中应用毛刺效果 安装 $ npm i -S vue-glitch # or $ yarn add vue-glitch 全球注册 // main.js import Vue from 'vue' ; import Glitch from 'vue-glitch' ; Vue . component ...
  • vue后台管理系统富文本组件(三)quill 简介 quill也是相当不错的富文本。 优点:美观,现代,功能强大。 缺点:兼容性不好,国际化语言支持缺失。 主要依赖说明 (先安装,步骤略) { "axios": "^0.18.0", ...
  • vue 模拟点击组件 打字机 (vue typer) Vue component that simulates a user ... Vue组件,用于模拟用户键入,选择和擦除文本。 VueTyper does not have any direct dependencies to any library or framework...
  • vue的异步组件

    2021-01-04 17:27:59
    我们之前了解过普通组件、单文本组件,那么这篇我们将了解一下另外一种组件的声明方式——异步组件 异步组件 在大型应用中,需要加载的资源较多,导致加载时间过长,所以我们可能需要将应用分割成小一些的代码块,...
  • vue项目中创建了一个可以重复使用的富文本编辑器(可参考【vuevue文本编辑器(可重复使用组件vue-quill-editor),由于是新闻编辑页面,首先需要把已经保存好的新闻内容展示在富文本编辑器中(父组件向子...
  • vue2-autocomplete一个Vue 2的文本输入自动完成组件
  • vue星星评分组件 Vue 2.x的星级评定组件 (Star Rating Component for Vue 2.x) Need more than stars? Check out vue-rate-it with hundreds of different raters built in! 需要更多星星吗? 查看vue-rate-it,...
  • vue2单个组件的路由守卫

    千次阅读 2019-06-13 15:33:57
    项目需求 移动端微信网页需要在进入页面的时候验证用户是否授权,如果未授权直接进入授权页面(授权页面是后台封装的微信授权,是一个外部链接...利用vue路由守卫。路由守卫有全局的和局部组件的。这里用后者: ...
  • ant.vue文本编辑器 Vue-Trix文字编辑器 (Vue-Trix Text Editor) Simple and lightweight Trix rich-text editor component for Vue.js. Vue.js的简单轻量级Trix RTF编辑器组件。 安装 (Installation) NPM NPM ...
  • vue多行文本框加组件 Vue代码镜像 (Vue-Codemirror) codemirror component for vuejs. vuejs的codemirror组件。 CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,931
精华内容 11,572
关键字:

vue单文本组件

vue 订阅