qingwei-li / vuep Goto Github PK

Like pug and stylus

The demo at https://qingwei-li.github.io/vuep/#/#demo is not showing for me no matter how much I wait. Here's a screenshot:

Thanks!

Awesome! Thanks for the contribution!!

I noticed the sync is not two ways, e.g in the ES6 usage demo the input number will not reflect back into the code. Perhaps that could be considered?

@Keyframes antion {
0%{
margin-top: 60px;
}
50%{
margin-top: 10px;
}
100%{
margin-top: 60px;
}
}

这种的解析是不可行的，解析的结果前面会自带一个class属性，有什么解决办法吗？

没有中文文档吗

Hi, @QingWei-Li 目前只支持字符串模版吗？
后续考虑支持单文件（.vue） 模版吗？

请问可以提供一个属性，用来屏蔽代码，只展示组件吗？

Is there any way I can limit vuep to its container? Currently my users are able to run JavaScript on my entire app (rather than just within the vuep preview window).

Reproduce:

https://codesandbox.io/s/6xk7rp0o33

When use the <script type="text/x-template"> in .vue file:

<template>
  <div id="app">
    <vuep template="#demo" />
    <script v-pre type="text/x-template" id="demo">
      <template>
        <div>hello {{ name }}</div>
      </template>
      <script>
        module.exports = {
          data() {
            return {
              name: 'vuep'
            }
          }
        }
      </script>
    </script>
  </div>
</template>

// ...

Will get this error:

当前我这个项目是需要依赖其他的组件了 比如说elementui 还挂载了aioxs之类的， 里面也用到自定义指令，混入等等某些是全局的。
请问vuep这种怎么搞定 全局自定义 和混入，已经vue prototye挂载的 怎么能传递到vuep里面去？

不能绑定click事件吗？

when i use vuep(v0.8.1/) in docsify, i only use component in lowercase. when i name the component with uppercase it can't find the target component and the warning message show the name in lowercase. the same as props

Hi! I want to change the template inside Vuep component dynamically.
I was use Vuep template props with Vue v-bind method to local prop called template — :template="template". But if I dynamic change the content of local template - Vuep component is not changes. How I can do that?

<template>
  <div id="app">
    <!-- <ac-simple-card></ac-simple-card> -->
    <vuep :template="code"></vuep>
  </div>
</template>

<script>
import Vue from 'vue'
import Vuep from 'vuep'
import 'vuep/dist/vuep.css'

Vue.use(Vuep /*, { codemirror options } */)
export default {
    name: 'LiveEditor',
      created: function () {
    this.code = `<template><div>Hello, {{ name }}!<ac-gravatar :avatar_props="{ size: 100, rounded: false }" email="[email protected]"/></div></template><script>module.exports = {data: function () {return { name: 'Vue' }}}`;
    }
}
</script>

<style>
</style>

ERROR

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

--->


at src/components/LiveEditor.vue
at src/App.vue

I am getting above ERROR please help me, anyone,

Hi, great component, but if I use it inside nuxt.js with ssr-support (only in browser-side) backend-side vue-renderer was delete component from page and show message:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. 
This is likely caused by incorrect HTML markup, for example nesting block-level elements inside
<p>, or missing <tbody>. Bailing hydration and performing full client-side render.

https://cinwell.com/vuep is not responding

Firstly, thanks for your effort on this, I love the idea of this component.

I found a problem with the way you pass the template prop to the vuep component referencing the string of code to render or the querySelection string to find the script tag of the code to render.

I keep getting an error that it can't be found because you are trying to querySelect the template element before it's even mounted. You need to change this to be done in mounted not created for vue to find that template element.

Line 77 will never find the template on the dom

我看源码里解析template部分时会判断script标签是否在末尾并补全，我想问一下这么设计的原因，难道不考虑有些人的书写习惯会将style放在末尾

vuep can not compile such a template:

this.code = `
<template>
    <!-- ERROR:Unknown custom element: <my-global-component>  - did you register the component correctly?-->
     <my-global-component />
</template>
`

<my-global-component/>is a component of the UI framework

If you try pasting something like the following at https://codemirror.net/mode/vue/index.html, the syntax works fine:

<template>
  <i-scene>
    <i-node ref="node"
      size="100 100"
      align="0.5 0.5 0.5"
      mount-point="0.5 0.5 0.5"
    >
      Hello 3D
    </i-node>
  </i-scene>
</template>

It looks like this:

However, with Vuep, I get broken highlighting in CodeMirror:

Any idea why the highlighting is doing that with the closing tags?

使用firefox的63.0.3 (64 位)，范例test最后一个使用iframe的方式不能解析正确。

一图胜千言：

Loving the project!

Some examples make the editor freeze, because it is updating the preview on every key stroke it seems like.

It may be a good idea to debounce (or throttle) updates to 100ms.

Another nice feature could be to provide a "run" or "play" button so that updates happen when desired.

And one more feature could be a checkbox that enables autorun, where when turned has to click "run".

类似于scss，ts，stylus之类的这种解析

项目还在维护吗？

Your component is great! I wonder if there is a way to preserve component state while editing the code.

Thanks.

Hello,

I can successfully render components in my app that's embedding vuep, but is there a way to pass app date into vuep somehow? For example, when writing code in the embedded editor, I'd like to be able to refer to live data being generated by the surround app. It seems though, that vuep is essentially a sandbox where no data can come in or out. Is this right? Are there any alternatives to get the behaviour I'm looking for?

Thanks!

As long as there is - symbol is highlighted error, I'm not familiar with codemirror, can consult how to deal with?

element ui组件解析失败 控制台报错没有注册

 <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

这样做还是错的吗？