小编War*_*sse的帖子

这就是select2.github.io为您提供的:

function addIcons(opt) {
    if (!opt.id) {
        return opt.text;
    }
    var $opt = $(
            '<span><img src="/images/flags/' + opt.element.value.toLowerCase() + '.png" class="img-flag" /> ' + opt.text + '</span>'
            );
    return $opt;
}

我想在我的选项中添加数据图像属性:

<option value="flag" data-image="/images/flags/flag.png">Country 1</option>

并将其记录在函数中:

function addIcons(opt) {
    if (!opt.id) {
        return opt.text;
    }

    var optimage = opt.attr('data-image');
    var $opt = $(
            '<span><img src="/images/flags/' + optimage + '" class="img-flag" /> ' + opt.text + '</span>'
            );
    return $opt;
}

可悲的是,一个简单的console.log(opt); 不会返回函数中的任何内容,因此我无法查看是否可以访问我的数据图像属性.上面的代码块返回一个错误,所以这显然不起作用.对此事有何建议？

我们正在构建一个基于 Vue 和 Nuxt 的庞大网站，其中包含超过 25 种不同的页面类型，这些页面类型无法与 Vue Router 开箱即用的标准 /:id 或 /overview/:slug 逻辑匹配。

由于 slug-matching 不是一种选择，我们正在考虑以下解决方案：

1. 用户访问页面“/this-is-a-topic-page”
2. 服务器调用返回 pageType 的 API topicPage
3. topicPage 与nuxt页面有关 WpTopicPage
4. 我们WpTopicPage在 Vue Router 的通配符实例中设置为我们的组件

代码如下：

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      // 1. User visits page "/this-is-a-topic-page"
      {
        name: 'wildcard',
        path: '*',
        component: *, // this should be dynamic
        beforeEnter: (to, from, next) => {
          // 2. Server calls API that returns the pageType `topicPage`
          this.$axios.get(`/call-to-the-api?slug=${to.params.slug}`)
            .then((res) …

在构建Vue应用程序时,我们在每个模板中重用某些Vue组件.我们的网格系统存在于.region,.layout,.grid,.column元素之外.所有这些都是独立的Vue组件(,...).

我们现在最终在每个模板中执行此操作:

import BlMain from '~components/frame/main/Main.vue'
import BlRegion from '~components/frame/region/Region.vue'
import BlLayout from '~components/frame/layout/Layout.vue'
import BlGrid from '~components/frame/grid/Grid.vue'
import BlColumn from '~components/frame/column/Column.vue'

有没有办法在项目中全局导入Vue组件？是否可以选择创建包含上述导入的组件Frame.vue并在每个模板中添加F​​rame组件？其他FE框架如何解决这个问题？

我们在Vue 上使用Nuxt JS.

有没有办法为Vue.js道具创建自定义道具类型(并通过验证扩展它)？

在下面的例子中,您将找到Object prop background.我希望有一个自定义道具类型Image,而不是Object.图像将检查src和alt填充,其余部分将是可选的.

我们现在拥有的:

export default {
  props: {
    background: {
      type: Object,
      src: String,
      srcset: String,
      alt: String,
      title: String,
    },
  },
};

我想要的是:

class customPropImage {
  // magic ...
}

export default {
  props: {
    background: Image,
  },
};

是否可以在CSS3上的一个p-tag上应用两个文本阴影？我想创建一个非常浅黑色的背景,边框为1像素.

像这样的东西:

text-shadow: 0 0 55px black; (very light black background to increase white text readabilitiy)
&
text-shadow: 0 1px 0 rgba(0,0,0, .25); (one pixel black drop shadow)

我在WordPress网站上使用Contact Form 7作为邮件系统.我使用wpcf7_before_send_mail过滤器将所有数据发送到外部Web服务(SOAP).当我收到该网络服务的"SUCCESS"消息时,所有消息都应该正常继续,但当我收到"FAILED"消息时,联系表单7不应发送电子邮件,并且网站上应显示不同的输出消息.是否有可能在功能中改变这一点？

<?

 add_filter( 'wpcf7_load_js', '__return_false' );
 add_filter( 'wpcf7_load_css', '__return_false' );

 add_action('wpcf7_before_send_mail', 'wpcf7_soap_service');


//Pushen via SOAP service naar servers
function wpcf7_soap_service($contact_form) {
$submission = WPCF7_Submission::get_instance();

if ( $submission ) {

/*** POST variabelen ***/    
$posted_data = $submission->get_posted_data();

/*** SOAP settings ***/    
ini_set("soap.wsdl_cache_enabled", "0");

/*** variabelen opzetten ***/
define('BROADCAST_URL','XXX');
define('SIM_LOGIN', 'XXX');
define('SIM_PASSWORD', 'XXX');
define('ENV_KEY', 'XXX');

/*** login parameters ***/
$params = array(
  'username' => SIM_LOGIN,
  'password' => SIM_PASSWORD,
  'environmentKey' => ENV_KEY,
);

/*** client opzetten ***/
$client = new SoapClient( …

这里有点挣扎。我的事件侦听器仅检测到我的单选按钮的“已选中”更改，而不是“未选中”更改。注意：只有纯 javascript (vanillajs)，没有 jQuery。

一个小 JSFiddle 来解释我的问题：https ://jsfiddle.net/kLuba37w/1/

<label class="checkbox checkbox--block">
    <input type="radio" name="radio" class="" data-show-more data-target="showmoretarget2" value="1"> <span></span> This is the first radio
</label>
<label class="checkbox checkbox--block">
    <input type="radio" name="radio" class="" value="2"> <span></span> This is the second radio
</label>

<div class="js-show-more" data-hook="showmoretarget2">
    <h2 class="h2"> Some more content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum repellendus, officia dolores consectetur. Error at officiis sequi iure earum.</p>
</div>

JS：

(function() {
 "use strict";

  var elements = document.querySelectorAll('[data-show-more]');

  [].forEach.call(elements, …

我有以下Vue JS组件,它是我的网格系统的一部分.

<bl-column type="section" classList="col--4-12 col--6-12--m col--1-1--s">
 ...
</bl-column>`

我想动态地将元素的类型设置为""(标准),""或"",如上例所示,添加包含section或article的类型变量.

这是我的Column.Vue文件:

<template>
  <{type} :class="classList">
    <slot></slot>
  </{type}>
</template>
<script>
  export default {
    name: "Column",
    props: ['classList', 'type'],
    data() {
      return {
        classList: this.classList || '',
        type: this.type || 'div',
      };
    }
  };
</script>

这显然不起作用并抛出错误,但您可以设置元素类型.有没有办法在不使用render()函数的情况下执行此操作？

在所有主流浏览器中,我的地图上的标记都可以使用,但不能使用chrome.有时他们工作,大多数情况下他们并非无缘无故.我得到的错误是:未捕获的TypeError:在此链接中键入错误.http://d.pr/i/Ojxc

我到Main.js的链接是缩小的google api js文件.当我缩小我的地图时,我一遍又一遍地得到错误.缩放然后无缘无故停止,然后地图阻止.

在HTML中,一切都是正确的,ajaxcall返回正确的数据,它可以在Safari,Opera,Firefox中运行.

我在这里绝望.

我的js代码:

function addStores(){

if(typeof google === 'object' && typeof google.maps === 'object'){
    try{
        $.ajax({
            type:"GET",
            url: api_url + '/locations',
            success: function(data){
                var stores = $.parseJSON(data);

                for(var i=0; i<stores.length; i++){
                    console.log("hallo");
                    var indi = i;
                    var image = new google.maps.MarkerImage('images/store/pin_@2x.png', null, null, null, new google.maps.Size(32,50));
                    var myLatLng = new google.maps.LatLng(stores[i].latitude, stores[i].longitude);

                    var marker = new google.maps.Marker({
                        position: myLatLng,
                        map:map,
                        icon: image,
                        tel: stores[i].tel,
                        state: stores[i].state,
                        street: stores[i].street
                    });

                    google.maps.event.addListener(marker, 'click', function(){
                        console.log("hkom");
                        map.setCenter(new google.maps.LatLng(marker.position.lat(), …

似乎无法定位我的3divs中的最后一个p-tag.我想删除的边框last-child的的p-标签.我在这做错了什么:

      <div class="box">
        <div class="span4">
          <p>Some text.</p>
        </div>
        <div class="span4">
          <p>Some text.</p>
        </div>
        <div class="span4">
          <p>Some text.</p>
        </div>
      </div>      


.span4 {
    width: 320px;
    p {
        font-size: 1.2em;
        padding: 0 40px;
        border-right: 1px #dfdfdf solid;
    }
    &:last-child {
        border: none;
    }
}

所以我有以下几点：

// Build the component HTML.
return (
  <dl className={ classes }>

    {items.map((item, index) =>
      { item.type === 'dd' ?
        <dd key={ index } index={ index }>{ item.text }</dd>
        :
        <dt className="search-result__description-list__description" key={ index } index={ index }>{ item.text }</dt>
      }
    )}

  </dl>
);

问题：什么都没有渲染。数据存在于items. 当我在没有 if-else 语句的情况下简单地记录内容时，它也会返回我的数据。但是，当我使用 if-else 语句时，什么也没有显示。没有错误以太。

有什么想法吗？